vue transition组件

• CSS3 transition 属性
• CSS3 transform 属性
• CSS3 animation 属性

在开始正式内容之前，有个骨灰级的推荐：hover.css 顾名思义：就是包含了各种hover时效果的插件。源码非常简单，当我们需要某种效果的时候，直接去源码中拷贝少量的代码就行。

1.transition属性

transition属性是一个简写的属性，用于设置四个过渡属性:

默认值: all 0 ease 0
transition-property:规定设置过渡效果的CSS属性名称
transition-duration:规定完成过渡效果需要多少秒或者毫秒
transition-timing-function:规定速度效果的速度曲线
    linear：规定以相同的速度开始至结束的过渡效果。
    ease：规定慢速开始，然后变快，然后慢速结束的过渡效果。
    ease-in：规定以慢速开始的过渡效果。
    ease-out：规定以慢速结束的过渡效果。
    ease-in-out：规定以慢速开始和结束的过渡效果。
    cubic-bezier(n,n,n,n)：在cubic-bezier函数中定义自己的值，可能的值是0-1之间的数值。
    
transition-delay:定义过渡效果何时开始

复制代码

2.transform 属性

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

translate3d(x,y,z)：定义3D转换
scale3d(x,y,z)：定义3D缩放
rotate(angle)：定义2D旋转，在参数中规定角度
复制代码

3.CSS3 animation 属性

animation: name duration timing-function delay iteration-count direction;
animation-name：g规定需要绑定到选择器的keyframe的名称。
    @keyframes myfirst
    {
    from {background: red;}
    to {background: yellow;}
    }

animation-duration：规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function：规定动画的速度曲线。
    linear：规定以相同的速度开始至结束的过渡效果。
    ease：规定慢速开始，然后变快，然后慢速结束的过渡效果。
    ease-in：规定以慢速开始的过渡效果。
    ease-out：规定以慢速结束的过渡效果。
    ease-in-out：规定以慢速开始和结束的过渡效果。
    cubic-bezier(n,n,n,n)：在cubic-bezier函数中定义自己的值，可能的值是0-1之间的数值。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count:规定动画应该放的次数。
    n：定义动画播放次数的数值
    infinite：固定动画应该无限次播放
animation-direction：规定是否应该轮流反向播放动画
    normal：默认值。动画应该正常播放
    alternate：动画应该轮流反向播放
复制代码