vue3 动画,vue的transition过渡动画
在开发中，我们想为一个组件的显示和消失添加某种过渡动画，这样可以大大增加用户体验。下面这篇文章主要介绍了Vue3转场动画如何快速入门的相关信息，有需要的朋友可以参考一下。
目录
Vue前面写的转场组件transition democlass的命名规则使用动画转场模式服装属性animate.css库使用动画序列使用自定义转场类写在最后。
写在前面
在实际开发中，为了增加用户体验，经常使用转场动画，转场动画是通过CSS中的转场和动画来实现的。在Vue中，Vue本身有一些内置的组件和API，可以帮助我们方便地实现过渡动画效果。接下来，我们来学习。
Vue的transition组件
Vue中提供了转场组件，可以在下列情况之一时自动为元素添加进入/退出的转场效果：
使用动态组件的v-if条件呈现和v-show条件显示也很简单。您需要用过渡组件包装要被动画化的组件或元素，然后定义一组类。
过渡demo
以下代码显示了转换组件的基本用法：
模板
button class= BTN BTN-primary @ click= hello world show=！“helloWorldShow”
显示和隐藏
/按钮
br /
img alt=Vue logo src=。/assets/logo.png /
过渡
hello-world v-if= hello world show msg=[一碗周]过渡动画演示/
/过渡
/模板
脚本设置
从“vue”导入{ ref }
从导入HelloWorld。/components/HelloWorld.vue
const helloWorldShow=ref(true)
/脚本
风格
#app {
/*更多css */
}
/*输入前后的样式*/。v-enter-from。v-离开到{
不透明度：0；
}
/*离开和进入过程中的风格*/。v-enter-active。v-离开-活动{
/*添加过渡动画*/
过渡：不透明度0.5s缓和；
}
/*进入后和离开前的风格*/。v-enter-to。v-离开{
不透明度：1；
}
/风格
代码的运行结果如下图所示：
上面使用了一些类，它们的含义如下：
V-enter-from:定义过渡的开始状态。它在元素插入之前生效，并在元素插入之后的下一帧被移除。V-enter-active:定义转换生效时的状态。它应用于整个过渡阶段，在插入元素之前生效，并在过渡/动画完成后移除。这个类可以用来定义过程时间，延迟和曲线函数的过渡。V-enter-to:定义进入转换的结束状态。下一帧在元素插入后生效(同时，v-enter-from被移除)，在转场/动画完成后移除。V-leave-from:定义离开转换的开始状态。当偏离过渡被触发时，它立即生效，并且下一帧被移除。V-leave-active:定义离开转换生效时的状态。它应用于离开转场的整个阶段，在触发离开转场时立即生效，并在转场/动画完成后移除。这个类可以用来定义离开过渡的过程时间、延迟和曲线函数。V-leave-to:离开转换的结束状态。下一帧在离开转场被触发后生效(同时，v-leave-from被移除)，并在转场/动画完成后被移除。下图是Vue文档中的一张图，完美的解释了整个过程。
class的命名规则
转换组件的类名不必以v-为前缀。其实我们可以自定义前缀，只需要添加一个名称属性，比如transition name=ywz ，然后所有前缀都变成ywz-。
使用animation
以前，我们使用过渡属性来实现组件进入和离开的过渡效果。现在我们可以使用动画属性来实现它。示例代码如下：
过渡
hello-world v-if= hello world show msg=[一碗周]过渡动画演示/
/过渡
钢性铸铁
/*离开和进入过程中的风格*/。v-enter-active。v-离开-活动{
/*添加过渡动画*/
过渡：不透明度0.5s缓和；
}
代码运行如下：
过渡模式
先看一个问题。当动画在两个元素之间切换时，会出现一个问题。重现此问题的代码如下：
模板
button class= BTN BTN-primary @ click= show=！“显示”显示和隐藏/按钮
br /
过渡
hello-world v-if= show msg=[一碗周]过渡动画演示/
img v-else alt=Vue logo src=。/assets/logo.png /
/过渡
/模板
脚本设置
从“vue”导入{ ref }
从导入HelloWorld。/components/HelloWorld.vue
const show=ref(true)
/脚本
风格
/*省略*/
/风格
操作效果如下：
我们可以看到两个组件在一瞬间同时存在，有时候不需要这种效果，所以需要设置过渡组件的过渡模式，也就是模式属性，包含三个值：
默认值：新元素与当前元素同时执行。In-out:新元素先进入过渡，当前元素完成后过渡离开。Out-in:当前元素经历先离开的过渡，新元素经历完成后进入的过渡。理解这个属性后，我们修改代码如下：
过渡模式=“出-入”
hello-world v-if= show msg=[一碗周]过渡动画演示/
img v-else alt=Vue logo src=。/assets/logo.png /
/过渡
现在运行结果如下：
appear属性
过渡组件的服装属性用于打开第一次呈现的动画。它接受一个布尔值，示例代码如下：
出现过渡模式=出-入
img v-if= show alt= Vue logo src=。/assets/logo.png /
/过渡
animate.css库的使用
如果我们在实际开发中一个一个的写这些动画序列，效率比较低，所以我们经常会用到一些动画库，最常见的就是animate.css
现在让我们看看如何在Vue中使用animate.css:
安装animate.cssnpm i animate.css
animate.css//主页简介
导入 animate.css
使用动画序列
。v-enter-active {
动画：fadeInDown 0.5s
}。v-离开-活动{
动画：fadeOutDown 0.5s
}
使用自定义过渡class
过渡组件还提供了自定义过渡类的属性，如下所示：
它们的优先级将高于普通的类名。
过渡
mode=out-in
enter-active-class= animate _ _ animate animate _ _ fade indown
leave-active-class= animate _ _ animate animate _ _ fade outdown
img v-if= show alt= Vue logo src=。/assets/logo.png /
/过渡
写在最后
本文介绍了转场的基本用法，通过animate.css掌握Vue提供的转场组件可以轻松实现转场动画。
除了单个组件的转场，Vue还提供了TransitionGroup组件，用来实现多个组件的转场动画。后面我们会介绍。
就是这样，这篇文章大约十分钟让你开始使用Vue3过渡动画。更多相关Vue3转场动画内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。