Vue内置组件Transition与TransitionGroup：动画效果的进阶运用

最新推荐文章于 2025-05-11 15:27:23 发布

原创

最新推荐文章于 2025-05-11 15:27:23 发布 · 801 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

一、组件简介

Transition和TransitionGroup是Vue处理过渡效果的内置组件，它们能够帮助我们实现元素或组件的入场和离场动画，提升用户体验。

二、Transition组件的进阶运用

1、多样化动画效果

Transition组件允许我们为元素的入场和离场定义不同的动画效果。通过CSS样式，我们可以实现淡入淡出、滑动、缩放等多种动画效果，为页面增添生动感。

示例代码：

<template>  
  <transition name="fade">  
    <div v-if="visible">Hello Vue</div>  
  </transition>  
</template>  
  
<style>  
.fade-enter-active, .fade-leave-active {  
  transition: opacity .5s;  
}  
.fade-enter, .fade-leave-to {  
  opacity: 0;  
}  
</style>

在上面的代码中，当show的值从false变为true时，<div>元素会以淡入的方式出现；当show的值从true变