39. [动画]如何利用Vue3制作动画效果
当我们了解用 CSS 配合 Vue 来制作动画和过渡效果后,本文我们讲一下如何利用 Vue3 制作的动画效果。从代码效果上,会比以前的代码有所精简。
制作一个显示隐藏的切换效果
新建一个文件Demo39.html
,然后复制Base.html
代码到Demo39.html
中。有了基础代码后,现在要作的需求就是让模板中的码云笔记前端博客
这几个字可以用按钮控制显示和隐藏。
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo03</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script> </head> <body> <div id="app"></div> </body> <script> const app = Vue.createApp({ data(){ return { isShow:false } }, methods:{ hanldClick(){ this.isShow= !this.isShow } }, template: ` <div v-if="isShow">码云笔记前端博客</div> <div><button @click="hanldClick">切换动画</button></div> ` }) const vm = app.mount("#app") </script>
上面的代码中我们先写了一个按钮,然后按钮绑定hanldClick
方法,要控制DOM
元素的显示和隐藏,这里我使用了v-if
。还需要一个数据项,我定义为了isShow
,用来控制元素的显示和隐藏。
这步编写完成可以到浏览器中查看一下效果。主要查看一下点击按钮是否可以实现文字的显示和隐藏。如果能正常控制,说明代码没有错误。就可以继续向下学习了。
编写 CSS 样式和制作进入动画
我们编写动画,同样需要编写 CSS 样式,并且这些 CSS 样式有固定的名称,你需要符合这些名称规则来进行编写。
先来写一个关键帧动画, 这个关键帧动画作了从左侧位移到屏幕中的效果,
<style> @keyframes comein{ 0%{ transform:translateX(-100px) } 100%{ transform:translateX(50px) } } </style>
然后需要写一个固定的 CSS 样式写法v-enter-active
意思是进入是采用何种动画方式,我们直接用animation
调用这个动画就可以了。
.v-enter-active{ animation: comein 1s; }
现在还是没有动画效果的,你还需要给动画的 DOM 元素加上<transition>
标签。
template: ` <transition> <div v-if="isShow">码云笔记前端博客</div> </transition> <div><button @click="hanldClick">切换动画</button></div> `
编写退出动画
现在已经有了元素进入动画,但是退出时还没有退出动画,所以,我们需要制作一个退出动画。过程和上面的方法类似。先编写 CSS 样式。
@keyframes comeout{ 0%{ transform:translateX(50px) } 100%{ transform:translateX(-100px) } }
有了comeout
的关键帧 CSS,然后又是一个固定写法v-leave-active
。
.v-leave-active{ animation : comeout 1s; }
这时候你再点击按钮,就有了退出动画。
最后附上完整代码,帮助大家学习:
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mybj</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script> </head> <body> <div id="app"></div> </body> <script> const app = Vue.createApp({ data(){ return { isShow:false } }, methods:{ hanldClick(){ this.isShow= !this.isShow } }, template: ` <transition> <div v-if="isShow">码云笔记前端博客</div> </transition> <div><button @click="hanldClick">切换动画</button></div> ` }) const vm = app.mount("#app") </script> <style> @keyframes comein{ 0%{ transform:translateX(-100px) } 100%{ transform:translateX(50px) } } .v-enter-active{ animation: comein 1s; } @keyframes comeout{ 0%{ transform:translateX(50px) } 100%{ transform:translateX(-100px) } } .v-leave-active{ animation : comeout 1s; } </style>
总结
以上就是本文的主要内容,我们学习了 Vue3 中的单个元素进入动画效果的制作,但是看起来还动画效果比较硬,没关系,下节我们再学习一下单个元素过渡效果的制作。
码云笔记 » 39. [动画]如何利用Vue3制作动画效果