Vue 应用中添加过场动画效果(一)

过场动画能提升应用的用户交互体验,Vue 对各种动画方法提供了一个包装组件 - transition, 通过 tansition 组件,可以轻松的制作成漂亮的过程动画。

transition 支持的场景

tansition 组件支持以下几种场景:

  1. 条件渲染 v-if
  2. 条件显示 v-show
  3. 动态组件
  4. 组件的根节点
  5. 路由切换

使用样例

我们使用 vue-cli 新建的项目框架为基础来构建样例。 在 vue-cli 构建好的项目框架中,找到 src\components\HelloWorld.vue 文件,

  1. 将原来 template 的部分替换为以下代码:
1
2
3
4
5
6
7
8
9
10
11
<div>
<button v-on:click="show = !show">
Toggle
</button>
<transition name="slide-fade">
<div v-show="show">
<p >Hello</p>
<img src="../assets/logo.png"/>
</div>
</transition>
</div>

可以看到,我们在 transition 中放置了一个文本和一张图片,并通过变量 show 来控制这两个元素是否显示。

  1. 将 script 部分的代码替换为:
1
2
3
4
5
6
7
8
export default {
name: 'HelloWorld',
data: () => {
return {
show: true
}
}
}

可以看到我们定义了变量 show。

  1. 在 style 中添加以下 CSS
1
2
3
4
5
6
7
8
9
10
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-active {
padding-left: 10px;
opacity: 0;
}

可以看到,上面的 CSS 定义了要给谈出的效果。 注意 CSS 选择器的名字是和 transition 的 name 属性相匹配的。实际上定义了过场动画的四个阶段,分别是:

v-enter
v-enter-to
v-leave
v-leave-to

而每个 active 实际上包括了从开始到结束的整个过程, 比如 v-enter-active 就包括了从 v-enter 到 v-enter-to 的过程。

本文标题:Vue 应用中添加过场动画效果(一)

文章作者:Morning Star

发布时间:2020年04月13日 - 19:04

最后更新:2021年04月16日 - 15:04

原始链接:https://www.mls-tech.info/web/vue/vue-use-transition/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。