脚本宝典收集整理的这篇文章主要介绍了如何利用vue实现css过渡和动画,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
过渡:通常用来表示元素上属性状态的变化。
动画:通常用来表示元素运动的情况。
/* css */ @keyframes leftToRight { 0% { transform: translatex(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(0); } } .animation { animation: leftToRight 3s; }
// js const app = Vue.createApp({ data() { return { aniMATE: { animation: true } } }, methods: { handleClick(){ this.animate.animation = !this.animate.animation } }, template: ` <div :class='animate'>hello</div> <button @click='handleClick'>切换</button> ` });
/* css */ .transITion { transition: background-color 3s linear 0s; } .gold { background-color: gold; } .cyan { background-color: cyan; }
// js const app = Vue.createApp({ data() { return { animate: { transition: true, gold: true, cyan: false } } }, methods: { handleClick() { this.animate.gold = !this.animate.gold; this.animate.cyan = !this.animate.cyan; } }, template: ` <div :class='animate'>hello</div> <button @click='handleClick'>切换</button> ` });
以上是通过设置class属性实现的,同样通过设置style属性也可以实现:
/* css */ .transition { transition: background-color 3s linear 0s; }
// js data() { return { transition: 'transition', styleObject: { backgroundColor: 'gold' } } }, methods: { handleClick() { if(this.styleObject.backgroundColor === 'gold'){ this.styleObject.backgroundColor = 'cyan'; }else{ this.styleObject.backgroundColor = 'gold'; } } }, template: ` <div :class='transition' :style='styleObject'>hello</div> <button @click='handleClick'>切换</button> `
在进入/离开的过渡中,会有 6 个 class 切换:
将需要过渡的元素使用transition标签包裹。设置过渡需要的class,可从以上六种class中选择。
/* css */ /* .v-enter-from { opacity: 0; } .v-enter-active { transition: opacity 1s ease; } .v-enter-to { opacity: 1; } .v-leave-from { opacity: 1; } .v-leave-active { transition: opacity 1s ease; } .v-leave-to { opacity: 0; } */ /* 简写 */ .v-enter-from, .v-leave-to{ opacity: 0; } .v-enter-active, .v-leave-active{ transition: opacity 1s ease; }
// js const app = Vue.createApp({ data() { return { show: true } }, methods: { handleClick() { this.show = !this.show; } }, template: ` <transition> <div v-if='show'>hello</div> </transition> <button @click='handleClick'>切换</button> ` });
使用动画效果只需要修改css部分,js部分功能不变。
/* css */ @keyframes shake-in { 0% { transform: translateX(-50px); } 50% { transform: translateX(50px); } 100% { transform: translateX(0px); } } @keyframes shake-out { 0% { transform: translateX(50px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(0px); } } .v-enter-active{ animation: shake-in 1s ease-in; } .v-leave-active{ animation: shake-out 1s ease-in-out; }
// js <transition name='hy'> <div v-if='show'>hello</div> </transition>
/* css */ .hy-enter-from, .hy-leave-to{ opacity: 0; } .hy-enter-active, .hy-leave-active{ transition: opacity 1s ease; }
我们可以通过以下 attribute 来自定义过渡类名:
他们的优先级高于普通的类名,这对于 Vue 的过渡系统和其他第三方 CSS 动画库,如 Animate.css. 结合使用十分有用。
// 首先引入样式文件 <link rel="stylesheet" href="https://cdnjs.clouDFlare.COM/ajax/libs/animate.css/4.1.1/animate.min.css" rel="external nofollow" /> const app = Vue.createApp({ data() { return { show: true } }, methods: { handleClick() { this.show = !this.show; } }, // 以自定义过渡类名的方式去添加动画样式 template: ` <transition name='hy' enter-active-class='animate__animated animate__bounce' leave-active-class='animate__animated animate__bounce'> <div v-if='show'>hello</div> </transition> <button @click='handleClick'>切换</button> ` });
在transition时间更长时,使用type=‘transiton'的效果:
可以发现animation先完成,但transition并没有终止会一致执行完,元素才消失。
/* css */ @keyframes shake-in { 0% { transform: translateX(-50px); } 50% { transform: translateX(50px); } 100% { transform: translateX(0px); } } @keyframes shake-out { 0% { transform: translateX(50px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(0px); } } .v-enter-from, .v-leave-to { color: red; } .v-enter-active { animation: shake-in 1s ease-in; transition: color 3s ease-in; } .v-enter-to, .v-leave-from { color: green; } .v-leave-active { animation: shake-out 1s ease-in-out; transition: color 3s ease-in-out; }
// js const app = Vue.createApp({ data() { return { show: true } }, methods: { handleClick() { this.show = !this.show; } }, template: ` <transition type='transition'> <div v-if='show'>hello</div> </transition> <button @click='handleClick'>切换</button> ` });
在transition时间更长时,使用type=‘animation'的效果:
<transition type='animation'> <div v-if='show'>hello</div> </transition>
<transition :duration='100' > <div v-if='show'>hello</div> </transition >
你也可以定制进入和移出的持续时间:
<transition :duration='{ enter: 1000, leave: 3000 }' > <div v-if='show'>hello</div> </transition >
想要用js实现动画,可以在transition的 attribute 中声明 JavaScript 钩子:
@before-enter="beforeEnter" | 进入过渡前 |
@enter="enter" | 进入过渡时 |
@after-enter="afterEnter" | 进入过渡后 |
@enter-cancelled="enterCancelled" | 进入过渡被打断时 |
@before-leave="beforeLeave" | 离开过渡前 |
@leave="leave" | 离开过渡时 |
@after-leave="afterLeave" | 离开过渡后 |
@leave-cancelled="leaveCancelled" | 离开过渡被打断时 |