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

如何临时让transition失效

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

1
2
3
4
5
6
7
8
<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()方法强制让当前设置生效

1
2
3
4
5
6
7
8
9
10
<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动画,用法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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

http://gtms01.alicdn.com/tps/i1/T1GjgcFm4eXXbWpdou-1000-852.png

1
-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 样式。

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