CSS3 transitions you may not know the point of knowledge

How to temporarily make transition invalid

We set a transition effect on an element, but in some special cases, we want transition to expire temporarily.
Our first reaction is to remove the transition setting, and then restore the transition setting when other property settings are complete.
But browsers can sometimes make us feel the same way.
Look at the following code, do you think there will be transition animation effect?

<div id="test"></div><script>    window.onload = function(){        var div = document.getElementById("test");        div.style.width="500px";        div.style.transition="all 2s ease";    };</script>

The answer is yes.
This is the case, with JavaScript single-threaded, to the DOM set style, just an assignment process, the browser engine does not immediately go to render, so you will see the animation effect.
So, how do we solve this problem?
You may first think of SetTimeout (), but it doesn't feel so natural.

There's another better way, the utility getComputedStyle () method forces the current setting to take effect

<div id="test"></div><script>    window.onload = function(){        var div = document.getElementById("test");        div.style.width="500px";        //获取计算后的宽度        window.getComputedStyle(div).width;        div.style.transition="all 2s ease";    };</script>

Transitionend Events

As you all know, KISSY1.4 supports the transition animation in the following ways:

KISSY.add(function(S,Node,Anim){    Node.all("#test").animate({            transform: "translate3d(-100px,0,0)"        }, {            duration: .3,            //增加useTransition配置即可            useTransition:true,            easing: "ease-out",            complete: function(){                //your code            }        });},{    requires:[‘node‘,‘anim‘]})

At first very curious, feel sure to need a lot of code to implement support for native animation, read the source after the discovery is actually quite simple, the key point is the Transitionend event

<style>#test {    width:200px;    height: 200px;    padding:10px;    background-color: #8bb8f3;    transition: all 1s ease;}#test:hover {    background-color: #ff5500;}</style><div id="test">touch me</div><script>    document.getElementById("test").addEventListener("transitionend",function(ev){        console.log(ev);        alert(1);    })</script>

Transition and visibility

-webkit-transition: visibility 0s linear .2s;

When studying the Google Phone version of the navigation menu effect, inadvertently found that the CSS in the above paragraph.
Visibility is not used to achieve the display, hiding the effect, and the excessive has what relationship?
But my gut instinct is that Google's engineers won't be so bored and write a useless code.

with the relevant keywords searched for a moment, and sure enough hidden mystery
But in one or two words do not understand, directly read this article http://www.zhangxinxu.com/wordpress/2013/05/transition-visibility-show-hide/

It seems that any detail will be harvested if it is dug down deeply.

Enable hardware acceleration

This everybody may know, the method also has several kinds, the introduction article also many, here by the way record.

Changing certain properties, such as Width,left, the browser recalculates the display of each frame, which seriously affects speed, especially on mobile devices. The solution is to let the GPU do these operations, simply by transforming the elements into images and making changes instead of recalculating each frame's CSS style.

.test{    //触发GPU加速    transform: translate3d(0,0,0);}