Drawer menu performances - javascript

I'm developing a side menu for my web-application (in the mobile version) using Angular2.
This the class when the menu is closed
.main-drawer
{
left: -300px;
width: 300px;
max-width: 100%;
z-index: 2;
transition-property: left;
transition-duration: 300ms;
transition-timing-function: ease-out;
}
When the user press the open-menu button I add the following class using jQuery
.main-drawer.opened
{
left:0;
transition-property: left;
transition-duration: 300ms;
transition-timing-function: ease-out;
}
This is the js code:
let drawer = jQuery ('.main-drawer');
drawer.toggleClass ('opened', !drawer.hasClass ('opened'));
Using this code on desktop computers the performances are good, but on mobile version it is laggy.
Is there a way to increase per performance?
The menu is pretty lightweight, does not contain a lot of nodes.
I noticed that other websites have pretty good performances even if their menu is full of things.
Thanks a lot

Translating x/y is more performant than transitioning or animation top/left, because translation leans on the GPU for rendering, which is powerful and makes movement smooth. top and left are operating at a DOM level, which is restrictive.
Also, you can shorten things a little. You can define your transition in one place on your initial element and then just define only what's changing in the added class. Try this:
.main-drawer
{
transform: translateX(-300px);
width: 300px;
max-width: 100%;
z-index: 2;
transition: 300ms transform ease-out;
}
.main-drawer.opened
{
transform: translateX(0);
}

Related

Background-image suddenly disappears on certain screen sizes on Chrome

On my site I have a container in which numerous divs containing one i elements with background-images are rendered. Those i elements all have the same background-image but with different background-positions so that only one http request has to be made, which is general best practice for smaller icons. The divs should be horizontally centered in the container.
My problem is that on Chrome and Firefox browser (latest versions) the rendering of the background images is not working as intended on certain (wide) screen sizes. Specifically on Chrome it will always not show some of the elements background-image unless the element is hovered and on Firefox it will not render background images at all.
If I add float: left to the divs inside the container the rendering issue is solved. However I want to have the elements centered in the container which does not work with the float left.
My question is what am I doing which is causing this behaviour on certain browsers and how can I try to resolve it?
You can have a look at this problem for yourself on:
http://staging.koreanbuilds.net
Here is a screenshot of the behaviour on Chrome and on Firefox
This is the css code for the container and elements:
/* Container of clickable champion icons */
#champContainer {
width: 100%;
padding-right: 10px;
padding-left: 10px;
text-align: center;
position: relative;
}
/* Champion images div container class */
.champIcon {
width: 65px;
height: 65px;
margin: 1px auto;
overflow: hidden;
}
.champIcon i {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
}
.champIcon i:hover {
zoom: 1.05;
cursor: pointer;
-moz-transform:scale(1.05);
-moz-transform-origin: 0 0;
}
Additionally the divs have one of those two classes
.nodisplay {
display: none;
}
.yesdisplay {
display: inline-block;
}
The i elements always have the following class
.chmp {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
text-align: left;
cursor: pointer;
}
as well as a class defining the background-image and position for example
.chmpashe {
background-image: url(http://statics.koreanbuilds.net/champion_65x65/sprite.png);
background-position: 0 -455px;
width: 65px;
height: 65px;
}
I don't see anything wrong with your code. It looks like this might be the same issue you are seeing here as I can't seem to load your spritesheet on it's own in Firefox
It might be worth cutting your sprite sheet down and testing if that works.
hope that helps!
edit:
Looking at your live site you have a more traditionally shaped stylesheet which doesn't go beyond 1000 pixels in ether dimension. It looks like the one you are using on staging goes beyond 80,000 pixels which looks to be where your issue is.

Dealing with "Rasterize Paint" lag on mobile when using css3: opacity transition

I am working on a project where users go back and forth between modals. I'm trying to do this by css transitioning opacity from 0 to 1. However, I noticed something is going very slow with my transitions.
I am getting about a 900ms to 2,000ms lag delay with some of my transitions, so I hooked up my phone to my laptop using chromes remote dev tools https://developer.chrome.com/devtools/docs/remote-debugging and started recording performance events https://developer.chrome.com/devtools/docs/timeline
This is an image of the recorded events fired from the phone. The yellow block is the jQuery click event handler firing, the yellow stripes belong to a jQuery.animate() function. However that green block at the bottom is almost 2 seconds long and it's labeled "Rasterize Paint". The purple slivers on the right are the actual animation taking place.
(EDIT: The jquery.animate() is different from the css animation taking place at the same time. I am adding a class in the event handler that changes opacity of an element that has transition: opacity 300ms set)
What does 'Rasterize Paint' mean? Why does this take so long? What can I do to avoid this?
EDIT:
Here is a fiddle of the page I'm running. I wasn't able to make a fiddle have the meta tag so it may have an extra 300ms delay on mobile devices. I recommend going through the steps "Got It! -> Fighter -> Accept -> Archery" After selecting "Archery" that is the slowest transition on the page. Why is that? I assume the layered opacities makes it very slow, but I still don't know for sure.
https://jsfiddle.net/2fLb1fd2/4/
.step {
position: absolute;
width: 100%;
max-width: 650px;
background: rgba(16, 16, 16, 0.8);
-webkit-transition: opacity 300ms linear, top 300ms linear;
-moz-transition: opacity 300ms linear, top 300ms linear;
-o-transition: opacity 300ms linear, top 300ms linear;
transition: opacity 300ms linear, top 300ms linear;
opacity: 0;
top: -100px;
left: 0;
right: 0;
margin: 30px auto 20px;
padding: 20px 20px;
color: white;
pointer-events: none;
text-align: center;
}
.step.showing {top:0;opacity:1;pointer-events:auto;}
Your problem here probably isn't opacity, opacity is a very cheap property (performance-wise) to animate with CSS. You are animating the top property however, this will trigger reflow each frame it is animated.
In order to make your animation smoother, you should animate transform: translateY(x); instead of the top property.

Javascript Make div appear from top to bottom

I hope my question makes sense, but what im trying to do is: show a div by transition. Meaning i want the div to slowly appear from top to bottom or from left to right, almost like a fade. Is this possible with either javascript or jquery?
It is possible, if i understand u need something like this:
http://jsfiddle.net/e5BuX/
$(document).ready(function(){
$(".cube").animate({left:"400px",opacity:"1"},2000);
});
If I understand the question correctly, the closest thing is the jQuery slideUp() or slideDown() methods. they are not a fade exactly, but like I said, probably the closest thing ( I am not a JavaScript/jQuery expert though).
here is a site that demonstrates how they look.
EDIT: Here are some other good examples of custom animations you can do with the animate() method
Hope that helps!
Its possible with vanilla javascript and jQuery.animate but it can also be done entirely css3 transition & animate. Take a look here for example
It can also be done only with css3. Here's a rough ideea.
HTML
<div class="im-a-div animate-me im-hidden">
<span class="center-me">I'm inside the div!</span>
</div>
<input id="show-the-div" type="button" value="Show div"/>
CSS
.im-a-div {
background: #ddd;
border: 1px solid #ccc;
border-radius: 5px;
height: 100px;
position: relative;
opacity: 1;
width: 400px;
}
.im-hidden {
margin-top: -100%;
opacity: 0;
}
.animate-me {
-webkit-transition: all 1000ms 0s ease-in-out;
-moz-transition: all 1000ms 0s ease-in-out;
-ms-transition: all 1000ms 0s ease-in-out;
transition: all 1000ms 0s ease-in-out;
}

AngularJS ng-show animation cross-fade inside ng-repeat

Simple (but not for me!) angularjs show/hide animation problem.
I have searched high and low but not found the solution to this specific problem, which can perhaps be best explained with an example and a "challenge".
First, the example: http://jsfiddle.net/adammontanaro/QErPe/1/
The challenge: can anyone make those images fade in and out over each other, rather than appearing below or above the currently shown image, then popping into place once the upper image's div is hidden?
The HTML:
<div>
<div data-ng-repeat="k in kitties" >
<img ng-src="{{k}}" ng-show="selectedImage==$index" ng-animate="{show:'animate-show', hide:'animate-hide'}" />
</div>
</div>
CSS:
.animate-show, .animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.animate-show {
opacity:0;
}
.animate-show.animate-show-active {
opacity:1;
}
.animate-hide {
opacity:1;
}
.animate-hide.animate-hide-active {
opacity:0;
}
I have been spinning my wheels on this for hours. I've seen scads of good posts demonstrating how to make a single image or div appear or disappear, but it all breaks down when I'm trying to simple cross-fade and replace. I've tried messing about with absolute/relative positioning, but to no avail.
Tried this with a switch, but wasn't able to use $index in the switch condition, so I could load my images at run-time. That is a big requirement here.
FYI - this is using angular 1.1.5
Thank you!!! Adam
You actually have it all correct! You're just missing a little CSS.
I fixed up your jsfiddle with the right stuff (a dash of position relative and absolute and a pinch of height) and it works like a charm.
The bulk of the new stuff is:
.container{
position: relative;
/* you have to add a height here if your container isn't otherwise set
becuse the absolutely positioned image divs won't calculate the height
for you */
height: 100px;
}
.image-repeat{
position: absolute;
top: 0;
left: 0;
}
With the classes applied in your HTML as needed.
Check it out: http://jsfiddle.net/QErPe/2/
Hope that helps!
This appears to actually be more of a CSS problem than an angular problem. You need to position the two divs on top of each other and make sure that they are actually occupying the same space at the same time. After that the cross-fading should be a piece of cake.
You can also do plain CSS3 on the .ng-hide class. For example:
div img {
border: medium none;
margin: 0;
padding: 0;
opacity: 1;
-webkit-transition: opacity 1s ease 0s;
-moz-transition: opacity 1s ease 0s;
-o-transition: opacity 1s ease 0s;
transition: opacity 1s ease 0s;
}
div img.ng-hide {
opacity: 0;
}
So now, when the ng-hide class is added, it will fade the opacity of the image. ngAnimate has it's place, but with simple CSS3 on the .ng-hide class, you can eliminate the frustrations.

sliding transition animatio between two web page

for example i have few webpage
how can i click the link in 1.html to 2.html
then 1.html slides to left and 2.html loada and slide from right?
just like this effect:
https://delicious.com/join
and the github project as well
https://github.com/CyanogenMod/android_packages_apps_Settings
there have no browser refresh blink
and the URL also changed.
is it using jquery?
I must use mvc php framework or rails to build the site?
how can I create some webpage like this?
any open source project or example code for that?
If what your asking is how to do the animation, then JQuery was the one responsible for it.
You can check this link for reference :
Downloads
Demo
Or you could try another search in the internet , just type "Fancy Sliding Forms"
Actually it all depends on you web designer/developer on how to implement that Jquery. Just read the docs.
God Speed!
Recently the challenge for me was to develop lightweight web applications, so I resorted to using minimal of jQuery because when viewed in mobile, the smooth behaviour was not guaranteed. So I chose hardware accelerated css transitions.
You can place the contents of web pages in two divs and dynamically add and remove classes to see this effect.
/* CSS */
.page-one {
width: 100%;
-webkit-transform : translateX(0px);
height:100%;
position: fixed;
background-color: #fff;
color : #6B6B77;
box-shadow: -3px 3px 3px #ddd;
overflow: auto;
}
.page-one.invisible {
-webkit-transform: translateX(-100%);
}
.page-one,
body {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.page-two {
-webkit-transform: translateX(100%);
}
.page-two.visible {
-webkit-transform: translateX(0px);
}
.page-two,
body {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}

Categories