CSS transition与transform使用分析

开始接触css动画的同学对于css33的transition属性以及transform属性会产生混淆，今天就借助小的demo来探讨一下这两者之间的关联和区别，希望可以让你有个更加清晰的认识；

首先我们来看一下什么是transition
在CSS 3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。，transition为我们的属性变化提供了过渡时间，让变化可以平滑执行；

下面这个例子当鼠标放上去时，图片宽高瞬间增大；

    img{
        height:15px;
        width:15px;
    }
    
    img:hover{
        height: 450px;
        width: 450px;
    }

当我们为img设置transition属性时，宽高变化会在1s内执行完成，而不是瞬间；

img{
    transition: 1s;
}

什么是transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。简而言之就是对元素进行位置形状的变化；

这里我们提供一个简单的例子
旋转 div 元素：

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */
}

了解了这两个的基本概念，我们就结合一个实例进行实战分析；

首先看效果图：

当我们点击红色球时，触发动画，再次点击收回小球，看上去是不是很棒；下面我们结合代码进行分析：
这里是我们的一些样式文件，放在这里供大家参考，方便下面的讲解；

    
"box-sizing: border-box">
    
"add">
        
"circle one">1
        
"circle two">2
        
"circle three">3

动画的实现主要分为两部分，小球弹出和收回，当我们首次点击时，对小球进行translate3d(x,y,z)的变换，因为我们已经在样式文件定义每个小球的执行过度时间,初始位置，以及相应的延时，所以我们的位置变化会是过渡效果，而不是瞬间执行；小球收回原理与之类似。我们不在累述;
下面看实现代码：

<script type="text/javascript">
    var flag=true;
    var add=document.getElementsByClassName("add")[0]; 
    var circle=document.getElementsByClassName("circle");
    add.onclick=function(){
    if(flag){
        // flag为true时，对小球进行展开，执行translate
        flag=false;
        circle[0].style.transform="translate3d(20px, 80px, 0)";
        circle[1].style.transform="translate3d(50px, 60px, 0)";
        circle[2].style.transform="translate3d(70px, 20px, 0)";
    //  透明度从0变为1，并且进行了小球颜色渐变
    for(var i=0;i<circle.length;i++){
        circle[i].style.opacity="1";
        circle[i].style.background="#da9063";
    }
    }
    else
    {
        // flag为false，小球收回去，并且设置透明度渐变和颜色渐变
       flag=!flag;
       // 再次点击将小球收回原来位置，
       // 这里复原用的是translate3d(0px, 0px, 0)，
       // 这里不是在移动x,y了；
        circle[0].style.transform="translate3d(0px, 0px, 0)";
        circle[1].style.transform="translate3d(0px, 0px, 0)";
        circle[2].style.transform="translate3d(0px, 0px, 0)";    
        for(var i=0;i<circle.length;i++)
    {
        circle[i].style.opacity="0";
        circle[i].style.background="#4caf50";
    }
    }
    // 用于测试时获取点击div的位置； 
    var rect = add.getBoundingClientRect();
    console.log(rect.top+"  "+rect.left);
    }

关于translate3d，我们提供一张表共大家参考,详细点击这里

transition的局限:
transition的优点在于简单易用，但是它有几个很大的局限。

（1）transition需要事件触发，所以没法在网页加载时自动发生。

（2）transition是一次性的，不能重复发生，除非一再触发。

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也
就是说只有两个状态。

（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属
性。
CSS Animation就是为了解决这些问题而提出的。

参考链接：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html