Vue过渡与动画介绍

发布时间：2023-03-31 14:25:54 所属栏目：教程来源：

导读：Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
1、在 CSS 过渡和动画中自动应用 class；
2、配合使用第三方 CSS 动画库，如 Animate.css；
3、在过渡钩子函数中使用 JavaS

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
1、在 CSS 过渡和动画中自动应用 class；
2、配合使用第三方 CSS 动画库，如 Animate.css；
3、在过渡钩子函数中使用 JavaScript 直接操作 DOM；
4、配合使用第三方 JavaScript 动画库，如 VeLocity.js。

语法格式：
使用 transition 组件包裹需要使用过渡效果的 DOM 元素。例如：

<transition name = "transition-name">
<div>...</div>
</transition>

接下来让我们先看一个淡入淡出效果的实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity s
}
.fade-enter, .fade-leave-to {
opacity:
}
</style>
</head>
<body>
<div id = "app">
<button v-on:click = "show = !show">{{ show ? '隐藏' : '显示'}}</button>
<transition name="fade">
<p v-show = "show" >hello !</p>
</transition>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
show:true
},
methods : {
}
});
</script>
</html>
代码解释：

HTML 代码第 3-5 行，我们使用 transition 组件包裹 <p> 标签，transition 组件指定 name 为 fade，通过指令 v-show 控制 <p> 标签的显示和隐藏；
HTML 代码第 2 行，定义按钮 button，点击修改 show 的值来控制标签 <p> 的显示隐藏；
CSS 中我们定义了 4 个样式；
JS 代码第 6 行，定义数据 show，默认值为 true。
那么，transition 组件是如何做到这样的过渡效果的呢？

我想，同学们肯定猜想到当元素切换状态的时候，我们定义的样式会作用于标签元素 <p>。那么，到底是不是这样呢？

打开控制台，检索到 <p> 标签上，我们可以清晰地看到：

当元素隐藏的时候，样式 fade-leave-active 和 fade-leave-to 会被添加到元素 <p> 上；
当元素显示的时候，样式 fade-enter-active 和 fade-enter-to 会被添加到元素 <p> 上。
实际上 Vue 在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除；
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡 / 动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数；
v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡 / 动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除；
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡 / 动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数；
v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡 / 动画完成之后移除。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!