您现在的位置是：亿华云 > 应用开发

通过示例了解Vue过渡和动画

亿华云2025-10-03 16:05:28【应用开发】5人已围观

简介Vue过渡和动画让我们网站更具现代感并为网站访问者提供更好的用户体验的好方法。幸运的是，对于开发人员而言，Vue动画只需几分钟即可完成设置。文本主要介绍 <transition>Vue

Vue过渡和动画让我们网站更具现代感并为网站访问者提供更好的通过用户体验的好方法。幸运的示例是，对于开发人员而言，过渡Vue动画只需几分钟即可完成设置。和动画

文本主要介绍 <transition>Vue 元素，通过使用该元素创建一些Vue动画，示例并了解将其添加到项目中的过渡基本知识。

首先，和动画我们来看一下 Vue Transitiont 怎么处理有条件的通过渲染内容。

然后，示例创建自己的过渡CSS动画样式。

最后，和动画我们将了解如何将第三方CSS库与Vue动画一起使用。通过

理解 Vue 过渡

虽然大多数人认为过渡只是示例装饰，但精心设计的过渡过渡可以：

抓住并引导用户的注意力强调重要信息引导用户浏览页面帮助建立更专业的品牌形象

所有这些要点都将有助于改善我们网站的用户体验，提高转化率和用户留存率，这是双赢呀。

添加Vue过渡到我们的项目

为了适应多数的开发人员，VueJS 提供了几种实现过渡的源码库方法：

css 或动画过渡样式 JS Hook 对 DOM 进行编辑集成第三方CSS

这些方法的难度取决于你现有的知识。

<transition>元素是啥?

transition 元素是帮助我们向元素添加过渡功能的包装器。它提供了不同的钩子，并向不断变化的元素添加了类，这样我们就可以在转换的不同阶段对它们进行样式化。

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

将自定义库添加到代码中时，这特别有用，稍后，我们会做说明。

另外，transition元素还会发出JS钩子函数，因此我们可以捕获它们并使用 JS 来执行动画。可用的钩子有：

before-enter / before-leave enter / leave after-enter / after-leave enter-cancelled / leave-cancelled <transition @before-enter=beforeEnter>  </transition>

然后，我们可以在 JS 中处理它们。

beforeEnter(el, done) { done() }

Vue Transition 高级用法

上面介绍的只是一些基础，在项目中，会遇到比较复杂的场景，这要怎么做呢?

让组件在加载下过渡

这个很简单就能实现了，只需将appear 属性添加到transition 元素中，如下所示：

在多个元素之间过渡

假设有两个这样交替的div。服务器托管

<transition name="fade" appear> <div v-if="visible"> Option A </div> <div v-else> Option B </div> </transition>

我们要做的就是将它们包在transition中，这样过渡样式将同时适用于两者。

要使代码按我们希望的方式起作用，需要注意以下几点：

绝对定位元素

当Vue在两个元素之间过渡时，有时会同时显示两个元素并进行进去/离开的过渡。如果要获得平滑的效果，则可能需要将它们绝对定位在彼此的顶部。

否则，将元素添加到DOM中或从DOM中删除时，这些元素可能只是在各处跳跃。

2.如果元素是一样的，则必须向该组件添加一个key属性

如果元素是一样的，Vue 会尝试优化内容，仅替换元素的内容。根据文档，如果要在多个元素之间进行过渡，最好始终添加 key。

更改过渡时间

Vue 可以检测到过渡/动画何时结束，但是如果我们想设置确切的持续时间，亿华云计算可以通过 duration属性设置。

我们可以为enter和leave过渡都传递一个值，也可以传有两个值的对象。

动态组件之间的转换

我们要做的就是将动态组件包装在transition元素中。

创建一个可重用的 transition 组件

在开发过程中，尝试设计可重用组件是一个很好的习惯。

封装一个可重用的 transition 很简单，在 transition 里放个 slot，如下所示：

现在，我们就不必担心将过渡样式，名称和所有内容添加到每个组件中，而只需使用此组件即可。

目前为止，我们已经了解了<transition> 元素，现在就可以使用它来制作动画。

建立第一个动画

<template> <div class=main-content> <transition name=rotate> <img v-if=show src=../img/logo.png > </transition> </div> </template> <script> export default { data () { return { show: true } } } </script>

接下来，我们添加一个按钮，通过切换变量的值来切换元素的显示。

<button @click=show = !show> Toggle </button>

设置了元素的条件渲染后，我们使用两个类来设置动画的样式：rotate-enter-active和rotate-leave-active，因为我们将过渡命名为rotate。

一个技巧是让离开和进入使用相同动画，只是它们的方向相反。

@keyframes rotate { 0% { opacity: 0; transform: scale(0) rotate(-180deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } .rotate-enter-active { animation: rotate 0.2s; } .rotate-leave-active { animation: rotate 0.2s reverse; }

现在，切换我们的组件时，我们应该看到类似这样的内容。