Vue中的简单淡入淡出动画

使用的场景:

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

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

Vue中的简单淡入淡出动画

  • 进入(显示,创建)

    • 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>

Vue中的简单淡入淡出动画

 

上一篇:怎么动态改变vue中内置过渡fade-enter-active和fade-leave-active里面的属性值


下一篇:vue学习---过度与动画