过渡和动画
使用 < transition> 组件包裹
例: <transition name="fade">
- <div v-if="true">
- 过渡动画
- </div>
- </transition>
- style:.fade-enter-active, .fade-leave-active {transition: opactiy .5s}
- .fade-enter, .fade-leave-to{opacity:0;}
以上切换 v-if 的状态能够让 div 元素渐显渐隐, 而不是直接添加删除
原理是 vue 通过 tansition 组件的 name 属性值, 然后使用它在过渡的各个节点为包含的元素添加类名. 当元素被添加到文档或者从文档中移除时, 会分别应用 enter 和 leave 两类过渡. 以下是会添加的类名:
{name}-enter(常用): 这个类名会在元素被插入 DOM 时加入, 然后在下一帧立刻移除. 可以使用它来设置那些需要在元素开始进入过渡时移除的 CSS 属性.
{name}-enter-active(常用): 在元素整个动画阶段应用. 和 - enter 同时被添加, 然后在动画完成时被移除. 适用于设置 CSS 过渡时间长度, 过渡的属性和使用的曲线函数.
{name}-enter-to: 这个类名会在 - enter 类名从元素移除的同时添加到元素上, 适合用来设置那些在元素开始进入过渡时添加的 CSS 属性, 通常在 - enter 类上设置与之相反的过渡属性好些
{name}-leave: 在离开过渡中, 在离开过渡时被添加, 下一帧被移除.
{name}-leave-active(常用): 在离开过渡中, 用于离开过渡的整个阶段.
{name}-leave-to(常用): 在离开过渡被触发之后下一帧生效, 在完成过渡之后被移除
JS 过渡动画
<transition > 还提供用于实现的 JS 动画钩子, 这些钩子函数和用于 CSS 的过渡的类名类似.
beforeEnter: 进入动画前开始触发, 适合设置初始值
enter: 这个钩子会在进入动画开始被触发, 可以在这里运行动画. 可以使用 done 回调来标明动画已经完成
afterEnter: 动画执行完成时被触发
enterCancelled: 进入动画被取消时触发
beforeLeave: 这个钩子等同于进入动画的 beforeEnter 钩子, 会在离开动画开始前被调用
leave: 对于离开动画而言等同于进入 enter 钩子, 可以在这里进入动画
afterLeave: 会在离开动画执行完成时被触发
leaveCancelled: 在离开动画被取消时触发
这些钩子会以时间的形式在 transiton 组件上触发
例:
- <transition
- v-on:before-enter="test1"
- v-on:enter="test2"
- v-on:leave="test3"
- >
- <div v-if="true"> 过渡动画 </div>
- </transition>
- //script
- methods:{
- test1(el){
- el.style.opacity = 0;
- },
- test2(el){
- TweenLite.to(el,0.6,{opacity:1,onComplete:done});
- },
- test3(el){
- TweenLite.to(el,0.6,{opacity:0,onComplete:done});
- }
使用 JS 动画可以创建比使用 CSS 过渡复杂的多的动画效果, 包括多步动画, 或每次显示不同的过渡效果等, 但 CSS 的性能更好, 所在一般能用 CSS 实现就使用 CSS.
来源: http://www.bubuko.com/infodetail-3302879.html