vue2.0中css过渡动画总结

vue2.0中css过渡动画总结

vue.2.0中的过渡动画利用自身的transition组件实现，有四种情形可以实现过渡效果

• 利用v-if渲染元素时
• 利用v-show展示或者隐藏元素时应用过渡生效
• 动态组件(把几个组件挂载到一个父节点上，在父节点绑定变量来决定显示哪个子组件)
• 组件根节点

---

过渡有两种总的状态：即enter(过渡开始)和leave(过渡结束)
这两中状态再细分，可分出6种状态，对应6个类名：

v-enter
开始过渡。在元素被插入（也就是数据控制dom显示）时生效，在下一个帧移除。可以定义过渡的开始状态。

v-enter-active
定义过渡的状态。在元素整个过渡过程中（v-enter的下一个阶段）作用，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

v-enter-to
（2.1.8版及以上） 开始过渡的最后一个状态，在v-enter-active之后执行。在元素被插入一帧后生效（于此同时 v-enter 被删除），在 transition/animation 完成之后移除。可以定义过渡的最终状态。

v-leave
过渡的最终状态开始消失的第一个阶段，在离开过渡被触发时生效，在下一个帧移除。

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

v-leave-to
定义过渡离开的最后状态。对于切换（toggle)效果来说，就是回到最开始的状态。

各个状态的关系以及什么阶段定义何种状态

示例

控制元素的滑入与滑出，例如：
DOM结构，要在transition组件上添加name属性，并在css中使用name的属性值替代以上v-状态种的v作为类名

  <transition name="slide">
    <div class="food" v-show="showFlag" @click="hide">
        <div class="food-content">
          <div class="imang-header">
            <img :src="food.image" >
          </div>
        </div>
    </div>
  </transition>

css样式：使用的是stylus语法

   .food
    position :fixed
    left:0
    top:0
    bottom: 48px
    z-index:30
    width :100%
    background :#fff
    /*定义元素最终移动到的位置，以及移动到此位置需要的时间*/
  .slide-enter-active
    transition: all .5s ease
    transform:translate3d(0,0,0)
    /*定义元素从什么位置离开，以及离开岛指定位置所需的时间*/
  .slide-leave-active
    transition: all .5s ease
    transform:translate3d(0,0,0)
    /*定义元素从100%的位置移入到0，过渡结束后再从0回到100%的位置*/
  .slide-enter,.slide-leave-to
    transform:translate3d(100%,0,0)

以上是vue2.0过渡效果的简单用法，如有错误，欢迎拍砖指正~~