vue的动画

vue有一套内置动画系统，可以通过指令实现动画效果

元素进入的样式：
1.v-enter:进入的起点
2.v-enter-active:进入的过程中
3.v-enter-to:进入的终点
元素离开的样式：
1.v-leave:离开的起点
2.v-leave-active:离开的过程中
3.v-leave-ro:离开的终点

动画

<template>
 <div>
 <button @click="!isShow">
  <transition name="bounce">
   <h1>隐藏出现动画</h1>
  </transition>
 </div>
</template>

<script>
export default{
data(){
return {
isShow:true
}
}
}
</script>
<style scope>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>

过渡

使用标签包裹住需要变化的标签

// html部分
<transition>
   <h1 v-if=isShow>隐藏出现动画</h1>
  </transition>

如果多个元素，不同的动画，可以在标签加name属性，加了name属性后css部分需要把v-开头的类名改为name自定义名，例如：

// html部分
<transition name="fade">
   <h1 v-if=isShow>隐藏出现动画</h1>
  </transition>
  
  <transition name="showAlive">
   <h2 v-if="isAlive">隐藏出现动画</h1>
  </transition>
// css 部分
<style>
//横岗首单词和标签transition的name值对应
.fade-enter{
opacity:0;
}
.fade-enter-active{
transition:opacity 2s;
}
fade-enter-to{
opacity:1;
}
.isAlive-enter{
opacity:0;
}
.isAlive-enter-active{
transition:opacity 1s;
}
.isAlive-enter-to{
opacity:1;
}
</style>

如果多个元素过渡可以使用标签包裹标签，并且里面标签元素需要标注不同的key值

// html部分
<transition-group>
  <li v-for="(item,index) in lists" :key="index">
  {{item.id}}
  </li>
 </transition-group>