vue使用动画——实现元素切换、组件切换、页面切换的动画效果

最新推荐文章于 2024-07-15 16:07:57 发布

叮叮叮叮叮~

最新推荐文章于 2024-07-15 16:07:57 发布

阅读量6.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：动画 vue.js javascript

本文链接：https://blog.csdn.net/weixin_49800246/article/details/120888099

本文介绍了如何在Vue.js中实现元素的动画效果，包括元素出现和离开的动画，以及组件和页面之间的切换动画。通过具体的实现代码，详细展示了Vue.js的动画应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、实现元素的动画效果

实现元素出现和离开的动画效果

实现代码

<el-button @click="show = !show">
      Toggle render
    </el-button>
<!--    盒子动画效果-->
<transition name="slide-fade"
            // 实现淡入淡出的动画效果
            enter-active-class='animate__animated animate__fadeInDown'
            leave-active-class='animate__animated animate__fadeOutUp'
            :duration="1000">
  <div v-if="show">
    <div class="div1"></div>
    <div class="div1"></div>
  </div>
</transition>

二、实现组件间的切换效果

<!--    实现组件切换-->
<div class="components">
  <el-button @click="change">切换</el-button>
  <transition name="component-fade"
              enter-active-class='animate__animated animate__bounceIn'
              leave-active-class='animate__animated animate__bounceOut'
              mode="out-in">
<!--        动态组件切换通过 :is=”component“ 来实现-->