transition
对于条件渲染(v-if)、条件展示(v-show)、动态组件等,如果希望切换时可以有过渡效果们就可以用transition组件。
1 2 3
| <transition name="fade"> <component ref="compIns" :is="curComp.comp" :data="curComp.data" @on-mounted="curComp.onMounted" @on-click="curComp.onClick"></component> </transition>
|
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| //进入时效果 //from表示初始状态 to表示结束状态(一般与组件本身样式相同) active过渡状态 //all 表示对所有属性进行过渡 1s为时间 ease、ease-in等是过渡函数 .fade-enter-from{ width: 0px; } .fade-enter-active{ transition: all 1s ease-in; } .fade-enter-to{ width: 100%; } //离开时效果 .fade-leave-from{ width: 100%; } .fade-leave-active{ transition: all 1s ease-in; } .fade-leave-to{ width: 0px; }
|
可以通过enter-from-class
等属性,自定义类名
通过 绑定duration
属性,可以设置动画执行时间,单位为ms
1 2
| <transition :duration="500"></transition> <transition :duration="{enter:100, leave:200}"></transition>
|
animate动画库
https://animate.style/
生命周期
transition有8个生命周期
@before-enter 进入之前
@enter 过渡
@after-enter 进入之后
@enter-cancelled 过渡中断
@before-leave
@leave
@after-leave
@leave-cancelled 仅限v-show
1 2 3 4 5 6 7 8
| <transition name="fade" @before-enter="enterFrom" @enter="enterActive" @after-enter="enterTo" @enter-cancelled="enterCancel" > </transition>
|
回调函数:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| const enterFrom = (el:Element) => { console.log('进入之前'); }
const enterActive = (el:Element) => { console.log('过渡曲线'); }
const enterTo = (el:Element) => { console.log('进入之后') }
const enterCancel = (el:Element) => { console.log('过渡被打断') }
|
@enter的回调函数可以接受一个done函数作为参数,执行该函数,使生命周期进入@after-enter。可以用来等待一些异步操作。
1 2 3 4 5 6
| const enterActive = (el:Element, done:Function) => { console.log('过渡曲线'); setTimeout(() => { done() },500) }
|
gsap
https://greensock.com/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| import gsap from "gsap";
const enterFrom = (el:Element) => { gsap.set(el, { width:0 }) }
const enterActive = (el:Element, done:gsap.Callback) => { gsap.to(el, { width: 100, duration:.5, ease:'ease-in', onComplete: done }) }
const leaveActive = (el:Element, done:gsap.Callback) => { gsap.to(el, { width: 0, duration:.5, ease:'ease-in', onComplete: done }) }
|
有点复杂,有时间再研究吧
appear
第一次页面加载时进行的动画
1 2 3 4 5 6 7
| <transition name="fade" appear appear-class="from" appear-active-class="active" appear-to-class="to" > </transition>
|
1 2 3 4 5 6 7 8 9
| .from{ width: 0; } .active{ transition: all .5s ease-in; } .to{ width: 100%; }
|
transition-group
对于列表类的渲染,比如v-for,添加transition效果
1 2 3 4 5 6 7
| <transition-group name="fade"> <div class="content-items" :key="item" v-for="item in list"> <slot name="content" :item="item"></slot> <slot name="trends"></slot> <card :content="`我是第${item}个`"></card> </div> </transition-group>
|
必须绑定key属性,其他基本与transition相同
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| .fade-enter-from{ width: 0; white-space: nowrap; overflow: hidden; } .fade-enter-active{ transition: all 1s ease-in; } .fade-enter-to{ width: 100%; white-space: nowrap; overflow: hidden; }
.fade-leave-from{ width: 100%; white-space: nowrap; overflow: hidden; } .fade-leave-active{ transition: all 1s ease-in; } .fade-leave-to{ width: 0; white-space: nowrap; overflow: hidden; }
|