vue中的过渡动画

简单示例：

代码片段：

<template>
    <div>
        <div class="ab">
            <transition name="fade" mode="out-in">
                //transition组件  name可以自定义命名name="lalala"
                //mode定义动画过渡模式 out-in 先出后进
                <p v-show="show">i am show</p>
            </transition>
        </div>
    </div>
</template>

vue实现过渡有两种方式：js过渡和css过渡

css过渡

css部分代码片段：

.fade-enter-active,.fade-leave-active{
    transition:all .5s ease-out;
}
.fade-enter{
    //进入时的动画 
    transform:translateY(-500px);
    opacity:0;
}
.fade-leave-active{
    //离开时的动画
    transform:translateY(500px);
    opacity:0;
}

tips:

<template>
    <div>
        <div class="ab">
            <transition name="fade" mode="out-in">
                <p v-show="show">i am show</p>
                <p v-else>not in show</p>
            </transition>
        </div>
    </div>
</template>

当transition中有多个标签且标签名相同时 不会执行过渡动画，需要给标签加上key

<template>
    <div>
        <div class="ab">
            <transition name="fade" mode="out-in">
                <p v-show="show" key="1">i am show</p>
                <p v-else key="2">not in show</p>
            </transition>
        </div>
    </div>
</template>

js过渡

可以在属性中声明 JavaScript 钩子，使用v-on监听事件钩子
代码片段：

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

js部分代码片段（el代表transition标签内的dom元素，done表示调用完毕之后调用的方法）

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

vue官网有更详细的示例