Vue的动画和过渡效果详解

原创

找点事做 2023-09-29 21:45:44 博主文章分类：vue ©著作权

文章标签 vue.js 前端 javascript 过渡效果 Vue 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者找点事做的原创作品，请联系作者获取转载授权，否则将追究法律责任

产品中优雅的交互动画可以吸引更多用户留存使用，对于前端的动画实现要求也越来越高了。在Vue中提供了一些快捷、方便的标签和内置属性来更加优雅的实现动画和过渡效果，今天我们来一起学习一下。

基础动画效果

公众号：Code程序人生，个人网站：https://creatorblog.cn

使用transition组件

Vue提供了transition组件，它允许我们在元素进入或离开DOM时添加过渡效果。在Vue单页面组件的template中，我们可以这样使用它：

<template>
  <div>
    <transition name="fade">
      <p v-if="showMessage">{{ message }}</p>
    </transition>
    <button @click="toggleMessage">Toggle Message</button>
  </div>
</template>

添加CSS过渡类

要使上述代码工作，我们需要在CSS中定义过渡效果的类。在单页面组件的style部分，我们可以这样做：

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

进阶动画效果

自定义过渡类名

您可以自定义过渡的类名，以实现更多个性化的效果。在Vue单页面组件的template中，可以这样使用：

<template>
  <div>
    <transition
      name="custom-fade"
      enter-active-class="custom-fade-enter-active"
      leave-active-class="custom-fade-leave-active"
      enter-class="custom-fade-enter"
      leave-class="custom-fade-leave"
    >
      <p v-if="showMessage">{{ message }}</p>
    </transition>
    <button @click="toggleMessage">Toggle Message</button>
  </div>
</template>

然后，在style部分中定义自定义类名的过渡效果。

列表过渡

如果您需要在列表中实现过渡效果，可以使用transition-group。在Vue单页面组件的template中，可以这样使用：

<template>
  <div>
    <transition-group name="list-fade" tag="ul">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </div>
</template>

然后，在style部分中定义列表过渡的类名和效果。