Vue学习笔记【18】——Vue中的动画（使用过渡类名）

为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；

使用过渡类名

步骤分析

 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 
 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来
 transition 元素，是 Vue 官方提供的
 2. 自定义两组样式，来控制 transition 内部的元素实现动画

代码结构

1. HTML结构：

 <div id="app">
     <input type="button" value="动起来" @click="myAnimate">
     <!-- 使用 transition 将需要过渡的元素包裹起来 -->
     <transition name="fade">
       <div v-show="isshow">动画哦</div>
     </transition>
   </div>

2. VM 实例：

 // 创建 Vue 实例，得到 ViewModel
 var vm = new Vue({
   el: '#app',
   data: {
     isshow: false
   },
   methods: {
     myAnimate() {
       this.isshow = !this.isshow;
     }
   }
 });

3. 定义两组类样式：

 /* 定义进入和离开时候的过渡状态 */
     .fade-enter-active,
     .fade-leave-active {
       transition: all 0.2s ease;
       position: absolute;
     }
 ​
     /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
     .fade-enter,
     .fade-leave-to {
       opacity: 0;
       transform: translateX(100px);
     }

自定义v-前缀

用来区分不同组的动画

1.HTML结构

  <transition name="my">
       <h6 v-if="flag2">这是一个H6</h6>
     </transition>

2.自定义样式

 <style>
     .my-enter,
     .my-leave-to {
       opacity: 0;
       transform: translateY(70px);
     }
 ​
     .my-enter-active,
     .my-leave-active{
       transition: all 0.8s ease;
     }
  </style>