通过vue的trasition浅谈css3的动画

vue提供transition来为元素和组件添加过渡过程，主要可以用于以下几部分：

（1）条件渲染v-if

（2）条件展示v-show

（3）动态组件、组件根节点

使用方法:

1、在单个元素中使用

<transition>

<div></div>

</transition>

2、多个元素中使用

<transition-group>

<div><a></a></div>

</transition-group>

状态使用：

1、v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

2、v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

3、v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

4、v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

控制一个div过渡的效果，通过控制各个阶段的状态，然后状态一般有四部分组成：width、height、left、top

<transition >

<div v-show="flag"></div>

</transition>

例如控制div显示的时候从左边滑过，隐藏的时候，从右边滑走的效果

.enter-active-right{
  transform:translateX(0);
  transition:all 1s ease;
}
.leave-active-right{
  transform:translateX(100%);
  transition:all 1s ease;
}
.enter-right{
  transform:translateX(-100%);
}
.leave-right{
  transform:translateX(0);
}

可以通过四个状态控制需要达到的一个过渡效果，可以通过transiton或者animation来达到状态改变时一种动画的效果。这里特别要注意的是这四个状态在写样式时的先后顺序；（这里具体为什么先后顺序会影响样式待探究）

通过vue一个实例动画来理解一下css3的动画，动画的效果一般体现在四个部分：开始，结束，翻转，播放等四个效果，css3涉及到动画的有transform,transition，animation四个状态。

transform是一个静态的转换，通过2d活3d对元素位置的一个改变，通过x，y，z对位置坐标的改变，在布局中一种好理解的讲法就是改变它的left、top的值，要达到一种动画的效果就需结合transition或者animation。

（1）一个圆圈在方框里反弹的效果

.content{
    width:100px;
    height: 100px;
    background-color: red;
   -webkit-animation: enter 2s;
    border-radius:50px;
    animation: enter 2s ease-in-out infinite alternate ;
  
}
@keyframes enter {
    0%{transform: translate3d(0,250px,10px);opacity: 0}
    25%{transform: translate3d(450px,0,0);opacity: 1}
    50%{transform: translate3d(800px,350px,0);opacity: 1}
    75%{transform: translate3d(250px,600px,0px);opacity: 1}
    100%{transform: translate3d(0,250px,10px);opacity: 1}
}

animation有9个属性，如下图

当得到一个动画需求的时候，首先要分析的开始，结束，翻转，播放四个效果，主要在这四方面体现，然后组成动画，

例如上面例子：

播放状态，4个，状态里有：开始，结束坐标，没有反转痕迹，根据这些分析构造出动画的效果，主要是left，top位置的变化；

形如上面的刷新，开始 到结束坐标没有变化，但过程是一个不停的翻转，是一个360度旋转的过程，所以用到了rotate，

.content{
    width:100px;
    height: 100px;
    border-left: 5px solid red;
    border-top: 5px solid red;
    -webkit-animation: enter 2s;
    border-radius:100px;
    animation: turn 1s  cubic-bezier(0.42,0,0.58,1) infinite ;
}
@keyframes turn{
     0%{}
    100%{transform: rotate(360deg)}
}

以上都是animation结合transfrom的一些例子，不同的效果不同的分析，然后主要是坐标的变化以及旋转。

接下来看一下transition，这个主要是为了给一种样式到另一种样式变化的过渡效果。