vue动画

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

•         v-enter   v-enter-active   v-enter-to 
•         v-leave   v-leave-active   v-leave-to 
•         v-enter     【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 
•        v-leave-to 【这是一个时间点】 是动画离开之后，动画离开的终止状态，此时，元素 动画已经结束了

一  自定义实现动画

1. 使用 transition 元素（Vue 官方提供的），把 需要被动画控制的元素，包裹起来。不然 不能动。

    使用transition完成任何元素进入/离开的过渡组件需要满足下列条件:

•              1.1条件渲染（v-if）
•              1.2条件展示（v-show）
•              1.3动态组件
•              1.4组件根节点

2. 自定义两组样式，来控制 transition 内部的元素实现动画

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

3.vm实例

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);
		    }