Vue3 过渡动画效果

文章目录

  • Vue3 过渡动画效果
    • 概述
    • ``组件
      • 简单使用
      • 为过渡效果命名
      • 自定义过渡class
      • JavaScript动画效果
      • 元素间过渡
    • ``组件
      • 列表动画
      • 状态动画

Vue3 过渡动画效果

概述

Vue 提供了两个内置组件,可以帮助你制作基于状态变化的过渡和动画:

  • 会在一个元素或组件进入和离开 DOM 时应用动画。
  • 会在一个 v-for 列表中的元素或组件被插入,移动,或移除时应用动画。

组件

是一个内置组件,它可以将进入和离开应用到通过默认插槽传递给它的元素或组件上。

进入或离开可以由以下的条件之一触发:

  • v-if 所触发的切换
  • v-show 所触发的切换

简单使用

Vue3 过渡动画效果_第1张图片

  • v-enter-from:进入动画的起始状态。
  • v-enter-active:进入动画的生效状态。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
  • v-enter-to:进入动画的结束状态。
  • v-leave-from:离开动画的起始状态。
  • v-leave-active:离开动画的生效状态。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
  • v-leave-to:离开动画的结束状态。




为过渡效果命名

可以给 组件传一个 name prop 来声明一个过渡效果名:




自定义过渡class

可以向 传递以下的 props 来指定自定义的过渡 class:

  • enter-from-class
  • enter-active-class
  • enter-to-class
  • leave-from-class
  • leave-active-class
  • leave-to-class



JavaScript动画效果

可以通过监听 组件事件的方式在过渡过程中挂上钩子函数。

添加一个 :css="false" prop。这显式地向 Vue 表明可以跳过对 CSS 过渡的自动探测。

对于 @enter@leave 钩子来说,回调函数 done 就是必须的。否则,钩子将被同步调用,过渡将立即完成。



元素间过渡

除了通过 v-if / v-show 切换一个元素,我们也可以通过 v-if / v-else / v-else-if 在几个组件间进行切换,只要确保任一时刻只会有一个元素被渲染即可。

如果你想在某个节点初次渲染时应用一个过渡效果,你可以添加 appear prop:




组件

是一个内置组件,用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。

列表动画




状态动画



你可能感兴趣的:(#,Vue3,vue3,过渡,动画)