Vue使用过渡类名实现动画效果

注意点：

• 使用 transition 元素，把需要被动画控制的元素，包裹起来
• 自定义style样式，来控制 transition 内部的元素实现动画

案例：
点击按钮，让h3显示，再点击让h3隐藏
定义一个div，里面添加一个按钮，具体如下：
<div id="app"> <input type="button" value="toggle" @click="flag=!flag">
分析：需要将h3显示隐藏，所以我们需要用 transition将h3元素包裹起来

<transition>
     <h3 v-if="flag">hh</h3>
  </transition>

vue实例化如下：

<script>
  var vm=new Vue({
    el:'#app',
    data:{
      flag:false
    },
    methods:{}
  });
</script>

自定义样式，使h3实现淡入淡出的效果：

 <style>
    .v-enter,
    .v-leave-to{
      opacity:0;
      transform: translateX(150px);
    }
    .v-enter-active,
    .v-leave-active{
      transition: all 0.8s ease;
    }
  </style>

修改v-前缀

只需在transition后添加name属性，然后在样式中将v-改为name属性值：
<transition name="my"> <h6 v-if="flag2">这是一个H6</h6> </transition>
样式中修改为：

    .my-enter,
    .my-leave-to {
      opacity: 0;
      transform: translateY(70px);
    }

    .my-enter-active,
    .my-leave-active{
      transition: all 0.8s ease;
    }

使用第三方类实现动画

在transition中将样式设置完毕，在要进行的动画的元素添加class类，为class:animated

<transition 
    enter-active-class="bounceIn" 
    leave-active-class="bounceOut" 
    :duration="{ enter: 200, leave: 400 }">
      <h3 v-if="flag" class="animated">这是一个H3</h3>
    </transition>