Vue中的简单淡入淡出动画

使用的场景:

刚进入页面.数据还没有显示,图片也没有,可以搭配骨架屏,带有这些动画!

Vue2中与Vue3中的动画节点函数名称不同

• 进入（显示，创建）

  • v-enter 进入前 （vue3.0 v-enter-from）

  • v-enter-active 进入中

  • v-enter-to 进入后

• 离开（隐藏，移除）

  • v-leave 离开前 （vue3.0 v-leave-from）

  • v-leave-active 离开中

  • v-leave-to 离开后

注意：多个transition使用不同动画，可以添加name属性，name属性的值替换v即可。

案例:

 

<template>
  <button @click="showFn">点击</button>
  <transition name="fade">   // 写了name 就可以替换v了
    <div v-if="show">100</div>
  </transition>
</template>

<script>
import { ref } from 'vue' // 响应式的
export default {
  setup() {
    const show = ref(true)  // 初始值是true
    const showFn = () => {
      show.value = !show.value  //取反
    }
    return { show, showFn }
  }
}
</script>

<style lang="less" scoped>
.fade-leave-from,   // 离开前,进入后透明度是1
.fade-enter-to {
  opacity: 1;
}
.fade-leave-active,
.fade-enter-active {
  transition: all 2s;   //过度是2秒
}
.fade-leave-to,
.fade-enter-from {
  opacity: 0;
}
</style>