CSS3 Transitions 你可能不知道的知识点

如何临时让transition失效

我们给一个element设置了transition效果，但某些特殊情况，我们希望让transition临时失效。
我们第一反应就是先移除transition设置，等其他属性设置完成之后再还原transition设置。
但浏览器有时候会让我们感觉事与愿违
看下面这段代码，你觉得会不会有transition动画效果？

<div id="test"></div>

<script>

    window.onload = function(){

        var div = document.getElementById("test");

        div.style.width="500px";

        div.style.transition="all 2s ease";

    };

</script>

答案是有的。
之所以会出现这种情况，与javascript单线程有关，给dom设置style，只是一个赋值的过程，浏览器引擎不会立即去渲染，所以会看到动画效果。
那么遇到这种情况，如何去解决呢？
大家可能首先会想到
setTimeout()，但感觉不是那么自然。

还有另外一种更好的方法，实用getComputedStyle()方法强制让当前设置生效

<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 事件

大家都知道，KISSY1.4中支持了transition动画，用法如下：

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‘]

})

刚开始很好奇，觉得肯定需要不少代码才能实现支持原生动画，看了源码之后才发现其实挺简单，关键点是transitionend事件

<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与visibility

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

在研究google
phone版导航菜单效果的时候，无意中发现css中有上面这么一段。
visibility不就是用来实现显示、隐藏效果的吗，与过度有什么关系呢？
不过直觉告诉我，google的工程师不会这么无聊，写一段毫无用处的代码

用相关的关键字搜索了一下，果然暗藏玄机
不过用一两句话说不明白，直接看这篇文章http://www.zhangxinxu.com/wordpress/2013/05/transition-visibility-show-hide/

看来任何细节深挖下去都会有收获。

启用硬件加速

这个大家可能都知道，方法也有好几种，介绍的文章也多，这里顺便记录一下。

变化某些属性，比如 width，left，浏览器会重新计算每一帧的显示效果，这严重影响速度，尤其是在移动设备上。解决办法就是让 GPU
来做这些运算，简单的说，就是将元素转化为图片再制作变化效果，而不是重新计算每一帧的 CSS 样式。

.test{

    //触发GPU加速

    transform: translate3d(0,0,0);

}