vue2 動畫

Vue2 動畫簡單總結

       v-enter(一開始有一下就移除) → v-enter-active → v-enter-to → v-leave(一瞬間加上就移除) → v-leave-active → v-leave-to

  1. 進入的起點就是離開的終點 v-enter === v-leave-to
  2. 進入的終點就是離開的起點 v-enter-to ===  v-leave
  3. v-enter-active && v-leave-active 過程中可以加上transition來用
  4. 如果是keyframe(動畫)的話就只需要enter-enter-active與enter-leave-active
  5. 如果是用transition(過渡)的話就需要起點配上終點
#單個標籤使用
//name是class名稱 apper代表一開始出現就要有動畫
<transition name="xxx" appear>
	<h1 v-show="isShow">test<h1/>
<transition/>
#多個標籤
<transition-group name="xxx" appear>
	<h1 v-show="isShow" key="1">test<h1/>
	<h1 v-show="isShow" key="2">test<h1/>
<transition-group/>
#第三方庫應用
<transition 
enter-class="的三方的庫"
enter-active-class="的三方的庫"
enter-to-class="的三方的庫"
leave-class="的三方的庫"
leave-active-class="的三方的庫"
leave-to-class="的三方的庫"
appear
>
	<h1 v-show="isShow">test<h1/>
<transition/>