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

vue

1. 概述

巴纳姆效应告诉我们:

人们更容易相信笼统的、常见的人格描述,并觉得特别适合自己,认为该描述真实地反映了自己的人格面貌。

这也是所有算命先生的小把戏,算命先生通常把话说的很笼统,很通用,基本是适合所有人的,再加上一些察言观色、随机应变的技巧,不明状况的人就会盲目的相信,觉得很“神”。

我们要学会正确的面对自己,增强自己的判断能力,才能做到真正的了解自己。

言归正传,今天我们来聊聊如何使用标签实现动画与过渡效果。

2.使用标签实现动画与过渡效果

2.1 普通的显示和隐藏

<body>

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

</body>

<script>

const app = Vue.createApp({

data(){

return {

show : false

}

},

methods : {

myClick() {

this.show = !this.show;

}

},

template:`

<div>

<div v-if="show">hello world</div>

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

</div>

`

});

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

 这是一个简单的例子,我们利用之前学过的 v-if 来简单实现 div 元素显示和隐藏的效果。接下来我们来给这个div元素加上动画和过渡效果。

2.2 标签 + 固定样式实现动画与过渡效果

<style>

@keyframes leftRight {

/* 进度为 X% 时,元素的横坐标位置 */

0% {

transform: translateX(0px);

}

33% {

transform: translateX(-100px);

}

66% {

transform: translateX(100px);

}

100% {

transform: translateX(0px);

}

}

/* 居中 */

.center {

text-align: center;

}

/* 入场起始样式 */

.v-enter-from {

opacity: 0; /* 透明度 */

}

/* 入场过渡效果 */

.v-enter-active {

transition: 3s opacity ease-in;

animation : leftRight 4s;

}

/* 入场结束样式 */

.v-enter-to {

opacity: 1;

}

/* 出场起始样式 */

.v-leave-from {

opacity: 1; /* 透明度 */

}

/* 出场过渡效果 */

.v-leave-active {

transition: 3s opacity ease-out;

animation : leftRight 4s;

}

/* 出场结束样式 */

.v-leave-to {

opacity: 0;

}

</style>

    const app = Vue.createApp({

data(){

return {

show : false

}

},

methods : {

myClick() {

this.show = !this.show;

}

},

template:`

<div class="center">

<transition>

<div v-if="show">hello world</div>

</transition>

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

</div>

`

});

这个例子中我们使用 transition 标签包裹在 div 外面,然后在样式中,使用了固定的 v-enter-from、v-enter-active、v-enter-to、v-leave-from、v-leave-active、v-leave-to 等样式描述了动画和过渡效果。

2.3 自定义样式名称

如果我们不想把样式名称固定,可以这样去写

        /* 入场起始样式 */

.myTransition1-enter-from {

opacity: 0; /* 透明度 */

}

/* 入场过渡效果 */

.myTransition1-enter-active {

transition: 3s opacity ease-in;

animation : leftRight 4s;

}

/* 入场结束样式 */

.myTransition1-enter-to {

opacity: 1;

}

/* 出场起始样式 */

.myTransition1-leave-from {

opacity: 1; /* 透明度 */

}

/* 出场过渡效果 */

.myTransition1-leave-active {

transition: 3s opacity ease-out;

animation : leftRight 4s;

}

/* 出场结束样式 */

.myTransition1-leave-to {

opacity: 0;

}

    const app = Vue.createApp({

data(){

return {

show : false

}

},

methods : {

myClick() {

this.show = !this.show;

}

},

template:`

<div class="center">

<transition name="myTransition1">

<div v-if="show">hello world</div>

</transition>

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

</div>

`

});

我们可以在 transition 标签上加上 name 属性,然后把刚才所有样式中开头的 v 替换成 name 的值即可。

3. 综述

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

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

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

4. 个人公众号

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

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

回到顶部