Vue 中使用 <transition> 标签创建过渡动画的详细教程

大家好，我是宝哥。

最近我打算更新一系列的新手Vue入门教程，预计更新20篇以上。欢迎关注我。

第一篇是关于Vue中如何创建动画过渡效果的教程，你将学会使用Vue的<transition>标签来创建动画，并且知道如何将动画融入项目。

首先，我们来了解Vue的过渡效果，它用来处理有条件渲染的内容。然后，我们会自己创建CSS动画样式。最后，我们看看如何结合第三方CSS库来使用Vue动画。

Vue过渡的理解

过渡不仅仅是装饰，一个好的过渡设计可以：

• 吸引和引导用户的注意力

• 突出重要信息

• 让网站流程更自然

• 引导用户在你的页面上操作

• 帮助塑造更专业的品牌形象

最主要是这些都能提升网站的用户体验，提高转化率和用户留存率。那么，在Vue中如何来实现呢？

在项目中添加Vue过渡

Vue.js为了满足不同开发者，提供了几种实现过渡的方法：

• 使用CSS过渡/动画样式

• 使用JavaScript钩子来编辑DOM

• 集成第三方CSS/JS库

如果你熟悉HTML/CSS，可能会倾向于使用CSS过渡/动画样式。如果你从React转过来，或者更熟悉JavaScript，那么手动编辑DOM可能更适合你。

先来看看从CSS处理单个元素开始。后面会介绍更复杂的情况（比如多个元素、动态组件等）。

transition标签是什么？

transition标签是一个包装器，它帮助你给元素添加过渡功能。它主要设置不同的钩子，并在元素变化时添加类，这样我们可以在过渡的不同阶段对它们进行样式设计。

有六种不同的过渡类（进入三种，离开三种）：

• v-enter-from / v-leave-from：过渡的起始状态；过渡开始后就被移除

• v-enter-active / v-leave-active：过渡的活跃状态

• v-enter-to / v-leave-to：过渡的结束状态

注意：这些是默认的类名，如果你给过渡指定了名字，类名格式会变为{name}-enter-from，{name}-enter-active等。

Vue过渡示例

创建Vue过渡的模板代码很简单。只需选择你想要过渡的元素，并用<transition>标签将其包装起来。

在这个例子中，我们创建了一个按钮，用来切换一个<p>标签的显示。

<template>
  <div>
    <h1>Vue过渡动画</h1>
    <button @click="open = !open">切换动画</button>
    <transition name="fade">
      <p v-if="open" class="example">你好，世界</p>
    </transition>
  </div>
</template>

以及对应的<script>部分。

import { ref } from 'vue'

export default {
  setup() {
    const open = ref(true)

    return { open }
  }
}

现在，我们只需要添加一些样式，过渡效果就能工作了。

我们使用Vue文档中的示例样式。

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

注意所有类都有fade前缀，这来自我们的transition的name属性。当过渡处于活跃状态时，向透明度属性添加一个过渡，使其平滑变化。

除了使用CSS过渡，你也可以使用CSS动画。

只要你使用正确的类名，就可以随心所欲地设计这些组件的样式。

自定义类名和JS钩子

我们可以通过给我们的元素添加以下六个属性中的任何一个来覆盖默认的类名：

• enter-from-class

• enter-active-class

• enter-to-class

• leave-from-class

• leave-active-class

• leave-to-class

当你在代码中添加自定义库时，例如，稍后我们将与Animate.css一起使用它。

<transition
  enter-active-class="animated fadeIn zoomIn"
  leave-active-class="animated fadeOut zoomOut"
>
  <!-- 条件内容 -->
</transition>

另外，transition元素还发出了一些JS钩子，因此我们可以捕获它们，并在JavaScript而不是CSS中执行我们的动画。可用的钩子有：

• before-enter / before-leave

• enter / leave

• after-enter / after-leave

• enter-cancelled / leave-cancelled

<transition @before-enter="beforeEnter">
  <!-- ... -->
</transition>

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

export default {
  methods: {
    beforeEnter(el, done) {
      done()
    }
  }
}

让我们继续看看使用Vue过渡的一些高级技术。

使用Vue过渡的高级技术

虽然我们刚刚构建的transition元素是一个很好的组件如何工作的概览，但我们在现实世界中经常会遇到更复杂的用例。

幸运的是，像Vue的大部分一样，模板非常灵活，可以适应大多数项目。让我们看看一些不同的情况。

让组件在加载时过渡

非常简单。只需向你的transition元素添加appear属性。

<transition name="fade" appear>
  <!-- ... -->
</transition>

在多个元素之间过渡

假设你有两div交替显示。

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

你所要做的就是将它们包装在一个transition元素中，然后过渡样式就会对两者都起作用。

有一些事情需要注意，以确保你的代码按照你想要的方式工作：

1. 你可能需要绝对定位你的元素

当Vue在两个元素之间过渡时，有时两个元素都会同时可见并进出过渡。如果你想获得平滑的效果，你可能需要将它们绝对定位在彼此上方。

否则，元素在被添加/从DOM中移除时可能会到处跳跃。

2. 如果你的元素有相同的标签，你必须给组件添加一个key属性

如果你的元素有相同的标签，Vue会尝试优化事情，只替换元素的内容。根据文档，当你在多个元素之间过渡时，添加key总是最佳实践。

改变你的过渡持续时间

Vue通常可以检测到你的过渡/动画何时结束，但以防万一你想要设置确切的持续时间，Vue过渡有一个duration属性。

你可以为进入和离开过渡传递一个值，或者传递一个有两个值的对象。

<template>
  <transition :duration="500">...</transition>
  
  <!-- 或者 -->
  
  <transition :duration="{ enter: 1000, leave: 200 }">...</transition>
</template>

在动态组件之间过渡

你所要做的就是将你的Vue动态组件包装在一个transition元素中。它就像过渡的基本用例一样！

你的模板代码可能看起来像这样。

<template>
  <transition name="fade" appear>
    <component :is="componentType" />
  </transition>
</template>

创建一个可重用的Vue过渡组件

在Vue中工作时，养成设计可重用组件的好习惯。

这在过渡中很容易做到——我们所要做的就是在根目录中放置一个transition元素，并插入一个组件插槽，这样我们就可以添加更多内容。

它看起来可能像这样。

<template>
  <transition name="fade" appear>
    <slot></slot>
  </transition>
</template>

现在，你不必担心向每个组件添加你的过渡样式、名称等，你只需使用这个组件，一切都会得到照顾。

太好了！现在我们知道了<transition>标签的所有信息，让我们用它来制作一个动画。

构建我们的第一个动画

首先，我们需要一个被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">切换</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;
}

现在，当我们查看我们的组件并切换我们的组件时，我们应该能看到动画效果。

使用第三方库

如果我们不想编写所有的CSS动画，有许多优秀的CSS动画库可以轻松集成到VueJS动画中。

在我们的第一个例子中，我们使用了<transition>元素生成的默认类名，但我们也可以覆盖这些值，使用我们想要的任何类名，例如，在这个例子中，它将是CSS库的类名。

我们将使用Animate.css——只需在index.html文件中添加CDN链接即可。

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
/>

现在，在<transition>元素中，我们可以使用enter-active-class和leave-active-class属性将我们的过渡连接到Animate.css。

注意，对于Animate.css，我们需要添加animated类。

<template>
  <transition
    enter-active-class="animated fadeIn zoomIn"
    leave-active-class="animated fadeOut zoomOut"
  >
    <!-- ... -->
  </transition>
</template>

非常简单。这是我们的最终效果。

就这样，你已经能够开始将VueJS动画添加到你的项目中了。

重要的是不要过度使用动画。

添加太多复杂的动画会迅速让你的网站显得俗气，但适当使用动画作为视觉反馈，是提升网站用户友好度的好方法。只要明智使用！

希望这个教程能帮助你更熟悉Vue动画和过渡。

祝你编码愉快！

---

最后，如果你觉得宝哥的分享还算实在，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。

关注我，加星标，明天见！

Vue 3 将推出新特性，可以抛弃虚拟DOM了！

关注下方宝哥微信，进宝哥前端开发11群，

获取我公众号整理的所有资料，

包括前端电子书，面试资料，简历模板和副业资料等！

以上，如果本文对你有所启发，欢迎点“在看、点赞”支持下吧！