VUE3 之 动画与过渡的实现 - 这个系列的教程通俗易懂,适合新手

vue

1. 概述

光环效应告诉我们:

当一个人在某一方面取得了巨大的成功,人们就会给他贴上正面的标签,这个人从此就被“优秀”的光环所笼罩,他做的一切,人们都认为是正确的。

例如:越是名气大的明星代言的商品,买的人就越多。

反之亦然,当一个人在某一方面失败了,往往就会被贴上负面的标签,从此被“失败”的“光环”所笼罩,他做的一切,周围人都认为是错误的。

例如:一个人第一次做生意就失败了,则这个人再做什么决策,他的朋友都认为是错误的。

因此,我们要理性判断,不能被“光环”影响我们的判断。

言归正传,今天我们来聊聊 VUE 的动画与过渡。

2.动画与过渡

2.1 基于 class 的动画

    <style>

/* 动画 */

@keyframes leftRight {

0% {

transform: translateX(0px);

}

33% {

transform: translateX(-100px);

}

66% {

transform: translateX(100px);

}

100% {

transform: translateX(0px);

}

}

.animation_leftRight {

animation : leftRight 4s;

}

.center {

text-align: center;

}

</style>

<body>

<div id="myDiv"></div>

</body>

<script>

const app = Vue.createApp({

data(){

return {

animate : {

animation_leftRight : false

}

}

},

methods : {

handleClick() {

this.animate.animation_leftRight = !this.animate.animation_leftRight;

}

},

template:`

<div class="center">

<div :class="animate">hello world</div>

<button @click="handleClick">左右移动</button>

</div>

`

});

const vm = app.mount("#myDiv");

</script>

这个例子中,我们让 hello world 这段文字,在 4 秒钟的时间里,先向左移动,再向右移动,最后回到中间。

利用我们之前学的绑定 class 的方法,使用 :class="animate" 将 class 样式与数据绑定,最终实现效果。

2.2 基于 class 的过渡

    <style>

/* 过渡 */

.transition {

transition : 3s background-color ease;

}

.blue {

background : blue;

}

.green {

background : green;

}

</style>

    const app = Vue.createApp({

data(){

return {

transition : {

transition : true,

blue : true,

green : false

}

}

},

methods : {

handleClick() {

this.transition.blue = !this.transition.blue;

this.transition.green = !this.transition.green;

}

},

template:`

<div>

<div :class="transition">hello world</div>

</div>

<button @click="handleClick">切换</button>

`

});

 该例中,我们将 hello world 的背景色,由蓝色渐变成绿色,同样是使用了 :class 绑定数据的方式。

2.3 过渡与 Style 的绑定

    const app = Vue.createApp({

data(){

return {

styleObj : {

background : 'blue'

}

}

},

methods : {

handleClick() {

if(this.styleObj.background === 'blue') {

this.styleObj.background = 'green';

} else {

this.styleObj.background = 'blue';

}

}

},

template:`

<div>

<div class="transition" :style="styleObj">hello world</div>

</div>

<button @click="handleClick">切换</button>

`

});

此例与上例的效果相同,只是使用 :style 的方式与数据绑定。

3. 综述

今天聊了一下 VUE3 的 动画与过渡的实现,希望可以对大家的工作有所帮助,下一节我们继续讲 Vue 中 动画 的相关知识,敬请期待

欢迎帮忙点赞、评论、转发、加关注 :)

关注追风人聊Java,这里干货满满,都是实战类技术文章,通俗易懂,轻松上手。

4. 个人公众号

追风人聊Java,欢迎大家关注

以上是 VUE3 之 动画与过渡的实现 - 这个系列的教程通俗易懂,适合新手 的全部内容, 来源链接: utcz.com/z/379858.html

回到顶部