详解Vue中过度动画效果应用 - 行业资讯 - 肥雀云

<强>一、实现动画过渡效果的几种方式

实现动画必须要将要进行动画的元素利用& lt; transition>标签进行包裹

1,利用CSS样式实现过渡效果

　　　　　　& lt;过渡的名字=跋А痹? lt;/transition> 　　　　

1。v-enter:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。

2。v-enter-active:定义进入过渡的结束状态。在元素被插入时生效,在过渡/动画完成之后移除。

3。v-leave:定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。

4。v-leave-active:定义离开过渡的结束状态。在离开过渡被触发时生效,在过渡/动画完成之后

　　& lt;过渡的名字=罢鄣北? 　　& lt; div类=" shopcart-list " v-show=發istShow”比; 　　& lt; div类=發ist-header”比; 　　& lt; h2类="标题"祝辞购物车& lt;/h2> 　　& lt;跨类="空" @click=翱铡痹谇蹇? lt;/span> 　　& lt;/div> 　　& lt; div类="列表内容" ref=傲斜怼北? 　　& lt; ul> 　　& lt;李类=笆称穊order-1px”v=?食品,指数)在selectFoods v-show=癴ood.count> 0”比; 　　& lt;跨类="名称"在{{selectName(指数)}}& lt;/span> 　　& lt; div类=凹鄹瘛北? 　　& lt; span>￥{{food.price * food.count}} & lt;/span> 　　& lt;/div> 　　& lt; div类=癱artcontrol-wrapper”比; 　　& lt; v-cartcontrol:食物="食物"祝辞& lt;/v-cartcontrol> 　　& lt;/div> 　　& lt;/li> 　　& lt;/ul> 　　& lt;/div> 　　& lt;/div> 　　& lt;/transition> 　　　　　　　　.fold-enter-active, .fold-leave-active 　　过渡:所有0.5 s 　　.fold-enter, .fold-leave 　　变换:translate3d (0, 0, 0) 　　.shopcart-list 　　位置:绝对的　　变换:translate3d(0、-100%、0)//动画结束后的效果需要在此处进行设置,设置在.fold-enter-active中,元素动画结束后该样式属性会被移除掉,将会看不到想要的效果　　上图:100%//元素即使显示也不再视图窗口中,通过变换实现显示　　z - index: 1 　　宽度:100% 　　　　之前　　　　

2,利用动画或者是动画库实现动画效果

　　　　　　& lt; div id="示例2 "比; 　　& lt;按钮@click=罢故?!秀”在切换show 　　& lt;过渡的名字=胺吹北? 　　& lt; p v=靶恪痹诳醋盼? & lt;/p> 　　& lt;/transition> 　　& lt;/div> 　　　　　　　　新Vue ({ 　　埃尔:“#示例2”, 　　数据:{ 　　显示:真　　} 　　}) 　　　　　　　　.bounce-enter-active { 　　动画:反弹0.5 s线性; 　　} 　　.bounce-leave-active { 　　动画:跳出0.5 s线性; 　　} 　　@keyframes反弹{ 　　0% { 　　变换:规模(0); 　　} 　　50% { 　　变换:规模(1.5); 　　} 　　100% { 　　变换:规模(1); 　　} 　　} 　　@keyframes跳出{ 　　0% { 　　变换:规模(1); 　　} 　　50% { 　　变换:规模(1.5); 　　} 　　100% { 　　变换:规模(0); 　　} 　　} 　　　　之前　　　　

3,自定义过度类名

　　<李>进教室李　　<李> enter-active-class李　　<李>离开教室李　　<李> leave-active-class李　　　　

,他们的优先级高于普通的类名,这对于Vue的过渡系统和其他第三方CSS动画库,如动画。css结合使用十分有用。