过渡:通常用来表示元素上属性状态的变化。
动画:通常用来表示元素运动的情况。
/* 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" | 离开过渡被打断时 |
const app = Vue.createApp({ data() { return { show: true } }, methods: { handleClick() { this.show = !this.show; }, handleBeforeEnter(el){ el.style.color = 'red'; }, handleEnter(el, done){ const timer = setInterval(()=>{ if(el.style.color === 'red'){ el.style.color = 'blue'; }else{ el.style.color = 'red'; } }, 1000); setTimeout(()=>{ clearInterval(timer); // 动画结束标志 // 不执行done()的话,handleAfterEnter不会执行 done(); }, 3000) }, handleAfterEnter(el){ console.log('success');; } }, template: ` <transition :css='false' @before-enter='handleBeforeEnter' @enter='handleEnter' @after-enter='handleAfterEnter' > <div v-if='show'>hello</div> </transition> <button @click='handleClick'>切换</button> ` });
// js const app = Vue.createApp({ components: ['item-a', 'item-b'], data() { return { component: 'item-a' } }, methods: { handleClick() { if (this.component === 'item-a') { this.component = 'item-b'; } else { this.component = 'item-a'; } } }, template: ` <transition mode='out-in' appear> <component :is='component' /> </transition> <button @click='handleClick'>切换</button> ` }); app.component('item-a', { template: `<div>hello</div>` }); app.component('item-b', { template: `<div>bye</div>` });
/* css */ .v-enter-from, .v-leave-to { opacity: 0; } .v-enter-active, .v-leave-active { transition: opacity 1s ease-in; } .v-enter-to, .v-leave-from { opacity: 1; }
// js const app = Vue.createApp({ components: ['item-a', 'item-b'], data() { return { component: 'item-a' } }, methods: { handleClick() { if (this.component === 'item-a') { this.component = 'item-b'; } else { this.component = 'item-a'; } } }, template: ` <transition mode='out-in' appear> <component :is='component' /> </transition> <button @click='handleClick'>切换</button> ` }); app.component('item-a', { template: `<div>hello</div>` }); app.component('item-b', { template: `<div>bye</div>` });
/* css */ .inline-block { display: inline-block; margin-right: 10px; } .v-enter-from, .v-leave-to { opacity: 0; transform: translateY(30px); } .v-enter-active { transition: all 1s ease; } .v-leave-active { position: absolute; } .v-move { transition: all 1s ease; }
对于数据元素本身而言,通过数字和运算、颜色的显示、SVG 节点的位置、元素的大小和其他的 property 这些属性的变化,同样可以实现动画的效果。
数字变化示例:
const app = Vue.createApp({ data() { return { number: 1 } }, methods: { handleClick() { const timer = setInterval(() => { if (this.number >= 10) { clearInterval(timer) }else{ this.number++; } }, 100); } }, template: ` <div>{{number}}</div> <button @click='handleClick'>增加</button> ` });