关于 Vue 动画和过渡，你需要知道的一切

喜欢就关注我们吧

本指南将重点介绍Vue中的<transition>元素，如何使用此元素创建Vue动画以及如何添加到项目中。

首先，我们来了解Vue Transition如何处理有条件地呈现的内容。

然后我们自己创建CSS动画样式。

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

好的！下面进入正文。

了解 Vue Transition

虽然大多数人认为过渡动画效果只是给网页装饰一下而已，但精心设计的过渡动画可以……

• 捕捉并引导用户的注意力
• 强调重要信息
• 在网站上建议自然流
• 引导用户浏览页面
• 帮助打造更专业的品牌形象

所有这些都将有助于改善网站的用户体验，从而提高转化率和用户留存率。实现双赢。

既然过渡动画效果对网站如此有益，那么如何在Vue中实现呢？

将 Vue Transition 添加到项目中

考虑到大多数开发人员，VueJS提供了几种实现过渡动画的方法：

• CSS过渡/动画样式
• 使用JavaScript钩子对DOM进行编辑
• 集成第三方的CSS/JS库

如果你具备了丰富的HTML/CSS经验，那么你应该更乐于使用过渡/动画样式。如果你是从React过来的或者拥有的JavaScript经验更足，那么建议走手动编辑DOM的路子。

<transition>元素到底是什么？

transition元素是一个包装器，可协助向元素添加过渡动画功能。其本质是设置不同的钩子并添加类到不断变化的元素中，因此我们可以在过渡的不同阶段设置样式。

有6种不同的过渡动画类。

• v-enter-from / v-leave-from：过渡的开始状态；过渡开始后将被删除（Vue2中的是v-enter和v-leave）
• v-enter-active / v-leave-active：过渡的活动状态
• v-enter-to / v-leave-to：过渡的结束状态

注意：对于这些在过渡中切换的类名来说，如果你使用一个没有名字的<transition>，则v-是这些类名的默认前缀。如果你给<transition>指定了name属性，那么v-enter会替换为{name}-enter-from、{name}-enter-active等等，以此类推。

Vue Transition示例

创建Vue Transition的模板代码并不难。只需选择你想要过渡的元素并将其包装在<transition>组件中即可。

在下面这个例子中，我们将创建一个按钮来转换<p>元素以进行渲染。

<template>
  <div>
    <h1>Vue Transition Animation</h1>
    <button @click="open = !open">Toggle Animation</button>
    <transition name="fade">
      <p v-if="open" class="example-div">Hello World</p>
    </transition>
  </div>
</template>

相应的<script>部分。

import { ref } from "vue";

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

    return {
      open,
    };
  },
};

现在，我们只需要添加一些CSS样式来使过渡动画工作。

请看Vue文档中的样式示例。

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

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

看到所有的类都包含前缀fade没？这是因为我们给<transition>指定了name属性！

这段代码的目的非常直观，因为具有相似状态的类。

这些样式表明当过渡处于活动状态时，将过渡添加到opacity属性可以使其平滑运动。

很好！

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

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

自定义类名和JS钩子

此外，将下面6个属性中添加到<transition>元素，可以覆盖默认的类名：

• 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>

还可以使用过渡元素发出的JS钩子，此时我们需要捕获它们并用JavaScript而不是CSS执行动画。可用的钩子是：

• before-enter / before-leave
• enter / leave
• after-enter / after-leave
• enter-cancelled / leave-cancelled

声明JS事件处理程序

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

然后用JavaScript进行处理。

export default {
  methods: {
    // done is an optional callback method
    beforeEnter(el, done) {
      done();
    },
  },
};

接下来继续讨论使用Vue过渡的一些更高级的技术。

Vue过渡的高级技术

虽然我们刚刚构建的过渡元素很好地概述了组件的工作原理，但我们在现实中遇到的通常是更复杂的用例。

幸运的是，与大多数Vue一样，模板非常灵活，可以适应大多数项目。

让组件在加载时过渡

简单极了。只需像这样将属性appear添加到过渡元素即可。

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

在多个元素之间过渡

假设你有两个div，它们像这样在彼此之间交替。

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

你所要做的就是将这两个div包装在一个过渡元素和BAM中——过渡样式两者皆适用。

要使代码按想要的方式运行，需要注意以下几点：

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

当Vue在两个元素之间进行过渡时，有时两个元素都是可见的，有时两个元素都在transition in/out。如果你想要平滑的效果，那么你可能会采取将它们彼此绝对定位的措施。

否则，当从DOM中添加/删除元素时，它们可能就会到处乱跳。

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

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

改变过渡时间

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

你可以为进入和离开转换传递一个值，也可以传递一个具有两个值的对象。

自定义过渡时间：

<transition :duration="500">...</transition>

...

<transition :duration="{ enter: 1000, leave: 200 }">...</transition>

在动态组件之间过渡

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

模板代码如下：

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

创建可重用的Vue Transition组件

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

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

代码如下所示：

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

现在，你不必再烦恼添加过渡样式、名称和所有内容到每个组件中，只需使用这个组件即可。

超棒的！在了解了<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。

有一个很酷的技巧可以让离开动画与进入动画相同，那就是reverse！

@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;
}

现在，如果我们查看组件并进行切换的话，应该能看到类似这样的动画。

这就是VueJS动画！你实现了！

使用第三方库

假设我们不想编写CSS动画怎么办？没关系，我们也有很多很棒的CSS动画库，可以很容易地合并到VueJS动画中。

在上面的第一个示例中，我们只用了<transition>元素生成的默认类名，但是我们可以覆盖这些值到任何类，在本例中，就是来自CSS库的类名。

对于示例，我们将使用Animate.css——要添加Animate.css，我们只需将CDN链接添加到index.html文件。

<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.js。

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

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

超级简单。请看最后的成果：

总结

我们就这样将VueJS动画添加到了项目中。

不需要画蛇添足。添加过多的大动画会让网站看起来俗气，而使用动画添加微妙的视觉反馈才能使网站更加用户友好。Get了吗！

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

编码快乐！感谢大家的阅读。