动画属性 transition

通过 name 定义 class

<template>
  <button @click="flag = !flag">click</button>
  <transition  name="xx">
    <div v-if="flag">xxx</div>
  </transition>
</template>
<script setup lang="ts">
import {ref} from "vue";
const flag = ref(true);
</script>
<style scoped>
div{
  color: blue;
}
.xx-enter-from{
  color:red
}
.xx-enter-active{
  transition: all 5s;
}
.xx-enter-to{
  color: blue;
}
</style>

xx-enter-from 开始状态

xx-enter-active 过度效果

xx-enter-to 结束状态

---

自定义类型

v-enter-from：进入开始状态

v-enter-active：进入的过度效果

v-enter-to：进入的结束状态

v-leave-from：离开的开始状态

v-leave-active：离开的过度效果

v-leave-to：离开的结束状态

<template>
  <transition v-enter-from="xx-enter-from" v-enter-active="xx-enter-active" v-enter-to="xx-enter-to">
    <div v-if="flag">xxx</div>
  </transition>
</template>

动画时间

<template>
  <transition name="xx" :duration="{enter:500,leave=800}">
    <div v-if="flag">xxx</div>
  </transition>
</template>
// 或者
<template>
  <transition name="xx" :duration="500">
    <div v-if="flag">xxx</div>
  </transition>
</template>

列表动画

场景: 可用于对列表渲染时候新增和删除数据添加动画效果,可借助第三方动画库如 animate

<template>
  <transition-group name="xxx">
    <ul>
      <li>111</li>
      <li>111</li>
    </ul>
  </transition-group>
</template>