04-Vue的简单动画Transition，动画钩子函数，Animate第三方动画库，TransitionGroup列表动画

一，Vue的Transition动画组件vue官网动画技巧

  Vue实现动画效果方式有6步，下图是实现入场动画Enter 和 出场动画Leave的时序图；其使用的组件是Transition会在一个元素或组件进入和离开 DOM 时应用动画。

• v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
• v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
• v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
• v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
• v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
• v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

  v-enter-active 和 v-leave-active 给我们提供了为进入和离开动画指定不同速度曲线的能力；

下面是一个简单的字符串动画效果的案例；

<button @click="show = !show">Toggle</button>
<Transition>
  <p v-if="show">hello</p>
</Transition>

<style>
	/* Transition组件会自动映入下面的样式 */
	.v-enter-active, //对应上图入场动画时间段
	.v-leave-active { //对应上图出场动画时间段，出场时间0.5秒
	  transition: opacity 0.5s ease;
	}
	
	.v-enter-from,  //这是一个时间点，是进入之前，元素都还是起始状态，此时还没有开始动画效果
	.v-leave-to { //这也是出场动画的一个时间点，是动画离开之后，动画已经结束了
	  opacity: 0;
	}
</style>

  在Vue中简单的淡入淡出之中效果，只要在style样式中只要实现这固定的四个步即可，这四个样式是Vue内置的，不能改变。更多使用效果可以参考：vue官网动画技巧。

二，自定义v-前缀

  当一个页面出现多个Transition标签的时候，他们都会公用默认的class，那如果不同的Transition想用不同的动画效果，可用通过自定义的方式来区分，自定义的方式就是通过给不同Transition组件 的 name 属性来区分。

三，钩子函数实现动画效果

可以通过监听 组件事件的方式在过渡过程中挂上钩子函数

<Transition
   <!-- 入场动画钩子函数 -->
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled=""
  
   <!-- 出场动画钩子函数 -->
  @before-leave=""
  @leave=""
  @after-leave=""
  @leave-cancelled=""
>
  <!-- ... -->
</Transition>

//注意：动画钩子函数的第一个参数：el ,表示要执行动画的那个DOM^素，是个原生的JS DOM对象
//大家可以认为,el是通过document.getElementByld ('')方式获取到的原生JS DOM对象
beforeEnter(el){
	// beforeEnter表示动画入场之前,此时，动画尚未开始,可以 在beforeEnter中，设置元素 开始动画之前的起始样式
	//设置小球开始动画之前的,起始位置
	el.styJe.transform = "translate(0,0)
},
enter(el, done){
	//这句话，没有实际的作用，但是，如果不写，出不来动画效果；
	//可以认为el. off setwidth会强制动画刷新
	el.offsetwidth
	// enter表示动画开始之后的样式，这里,可以设置小球完成动画之后的，结束状态
	el.style.transform = "translate(150px, 450px)"
	el.style.transition = "all Is ease"
	//这里的done ,起始就是afterEnter这个函数,也就是说：done是afterEnter函数的引用，对于 @enter 和 @leave 钩子来说，回调函数 done 就是必须的。否则，钩子将被同步调用，过渡将立即完成
	done();
}, 
afterEnter(el){
//动画完成之后，会调用afterEnter// 
	console.log(1 ok')
	this.flag = !this.flag
}

四，Animate第三方动画库

Animate官网

本地引入animate.css

五，TransitionGroup列表动画

上面的Transition，钩子函数，第三方动画库都只是实现单个动画的，要想实现列表这种同时多个动画需要借助TransitionGroup来实现；更多动画效果官网Transition-Group

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}