40. [动画]用Vue3制作过渡效果
有了 39 节内容的学习,本节我们在它的基础上用 Vue 的内置组件,制作过渡效果。需求很简单,还是 DOM 元素的显示和隐藏,但不在是滑入效果,而是慢慢改变透明度opacity
。
准备基础文件
新建一个Demo40.html
,然后复制Demo39.html
代码过来,并去掉关键帧keyframes
样式,但保留v-enter-active
和v-leave-active
。
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mybj</title> <style> .v-enter-active{ animation: comein 1s; } .v-leave-active{ animation : comeout 1s; } </style> <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>
这时候的代码是没有任何过渡效果的,但是依然可以切换显示与隐藏效果。
增加过渡效果
上节我们说了v-enter-active
和v-leave-active
都是固定写法,但是我们需要告诉它执行的过渡效果是什么样子的,这样我们就需要再写两个固定的 css 样式,v-enter-from
和v-enter-to
。这两个样式就是控制进入前 DOM 的样式和进入完成时 DOM 的样子的。
<style> .v-enter-from{ opacity: 0; } .v-enter-to{ opacity: 1; } .v-enter-active{ transition: opacity 3s ease-out; } </style>
这时候到浏览器中预览一下,就有了进入时的透明度过渡效果。
但现在隐藏时是没有效果的,我们还需要制作一个隐藏效果。这时候也是两个固定的 CSS 选择器v-leave-from
和v-leave-to
,然后再编写离开时的执行效果v-leave-active
。
<style> .v-leave-active{ transition: opacity 3s ease-out; } .v-leave-from{ opacity: 1; } .v-leave-to{ opacity: 0; } </style>
写完这些 CSS 样式,隐藏时就也有了动画效果。
目前这段 CSS 代码还是比较冗余的,我们可以简化一下。简化的原则就是把一样的值的选择器合并到一期,就得到了下面这样的代码。
<style> .v-enter-from , .v-leave-to{ opacity: 0; } .v-enter-to , .v-leave-from{ opacity: 1; } .v-enter-active , .v-leave-active{ transition: opacity 3s ease-out; } </style>
最后预览一下,效果还是可以实现的。
总结
本文我们主要学习了 Vue 过渡效果的制作。通过两节的学习你也可以大概知道 Vue 动画和过渡效果的套路了,就是利用固定的选择器,然后配合<transition>
标签来现实。
码云笔记 » 40. [动画]用Vue3制作过渡效果