Vue 04.过渡&动画

过渡&动画

vue文档-过渡&动画

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

使用过渡类名

1. HTML结构：

<div id="app">
    <input type="button" value="动起来" @click="myAnimate">
    <!-- 使用 transition 将需要过渡的元素包裹起来 -->
    <!-- 如果 transition 标签没有name熟悉，则默认使用 v-enter 等 -->
    <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. 定义两组类样式：

/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
/* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
/* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
.fade-enter,  /* fade开头是transition标签name属性定义的 */