Vue动画

最新推荐文章于 2025-06-30 23:10:09 发布

原创最新推荐文章于 2025-06-30 23:10:09 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

19 篇文章

订阅专栏

本文深入探讨Vue中的动画应用，包括过渡类名的使用、第三方CSS动画库的集成、自定义动画钩子函数等，旨在提升用户体验，使页面功能更加直观。

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

Vue中的动画

为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；

1 使用过渡类名

HTML结构：

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <transition>
        <h3 v-if="flag">aaaa</h3>
    </transition>
</div>

样式：

<style>
    /* 两个时间点 */
    .v-enter,/* 进入之前元素的初始状态 */
    .v-leave-to{ /* 动画离开之后,离开的终止状态,此时元素动画已经结束 */
        opacity:0;
        transform:translateX(500px);
    }
    /* 两个时间段 */
    .v-enter-active,  /* 入场动画 */
    .v-leave-active{    /* 离场动画 */
        transition: all 1s ease;
    }
</style>

2 修改v-前缀

1.样式

.my1-enter,
.my1-leave-to{
    opacity:0;
    transform:translateX(500px);
}
.my1-enter-active,
.my1-leave-active{
    transition: all 1s ease;
}

.my2-enter,
.my2-leave-to{
    opacity:0;
    transform:translateX(500px);
}
.my2-enter-active,
.my2-leave-active{
    transition: all 1s ease;
}

html结构

<transition name='my1'>
    <h3 v-if="flag">aaaa</h3>
</transition>
<transition name='my2'>
    <h2 v-if="flag">bbbb</h2>
</transition>

3 使用第三方 CSS 动画库

3.1 导入动画类库：

<link rel="stylesheet" type="text/css" href="./lib/animate.css">

3.2 定义 transition 组件：

<transition enter-active-class="animated bounceIn" 
            leave-active-class="animated bounceOut">
    <h3 v-if="flag">aaaa</h3>
</transition>
<!-- 或 -->
<transition enter-active-class=" bounceIn" leave-active-class="bounceOut">
    <h3 v-if="flag" class="animated">aaaa</h3>
</transition>

3.3 设置动画时长

统一设置 :duration="200"

<transition enter-active-class=" bounceIn" 
            leave-active-class="bounceOut" 
            :duration="200">  
    <h3 v-if="flag" class="animated">aaaa</h3>
</transition>

分别设置 :duration="{enter:200,leave:400}"

<transition enter-active-class=" bounceIn" 
            leave-active-class="bounceOut" 
            :duration="{enter:200,leave:400}">
    <h3 v-if="flag" class="animated">aaaa</h3>
</transition>

4 使用动画钩子函数

4.1 定义 transition 组件

<input type="button" value="加入购物车" @click="flag=!flag">
<transition @before-enter="beforeEnter" 
            @enter="enter" 
            @after-enter="afterEnter">
    <div class="ball" v-show="flag"></div>
</transition>

4.2 定义三个 methods 钩子方法：

methods:{
    // el : 要执行动画的元素,是原生的js DOM对象
    beforeEnter(el) {
        //动画入场之前,此时动画尚未开始,
        // 在这里设置动画之前的原始样式
        el.style.transform = 'translate(0,0)'
    },
    enter(el,done) {
       // 动画开始之后的样式
        // 在这里设置完成动画之后的结束状态
      
      
        
        el.offsetWidth
      // 这句话没有实际作用,但不写出不来动画效果
        // 可以认为el.affsetWidth会强制动画刷新
        // el.offsetHeight
        // el.offsetRight
        // el.offsetLeft  都可以
      
        el.style.transform = 'translate(500px,500px)'
        el.style.transition ='all 1s ease'
      
        done()  //相当于调用了afterEnter方法
    },
    afterEnter(el){	
        // 动画完成之后
        this.flag = !this.flag;
      		// 作用一: 控制小球的显示与隐藏
			// 作用二:直接跳过后半场动画 
    		//  @click="flag=!flag"   false->true->false 
    }
}