时间:2021-05-26
本文实例为大家分享了vue实现循环切换动画的具体代码,供大家参考,具体内容如下
注意动画的钩子函数的判断逻辑,注意动画编写时类名的顺序!!
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <style> .box{ width: 200px; height: 200px; background-color: red; } .guo-enter-active,.guo-leave-active{ width: 200px; height: 200px; opacity: 1; background-color: red; transition: 0.7s; } .guo-leave-to{ width: 100px; height: 100px; opacity: 0; background-color: orange; } .guo-enter{ width: 100px; height: 100px; opacity: 0; background-color: orange; } .box2{ margin-top: 100px; } </style> <script src='vue.min.js'></script></head><body> <div id='app'> <div> <input type="button" value='change' @click='change'> <transition name='guo' @after-enter='Enter' @after-leave='Leave'> <div v-show='show' class='box'></div> </transition> <transition name='guo' @enter='Enter2' @after-leave='Leave2'> <div v-show='show2' class='box box2'></div> </transition> </div> </div> <script> new Vue({ el:'#app', data:{ show:false, show2:false }, methods:{ change(){ this.show = !this.show; }, Enter(){ this.show2 = true; }, Leave(){ this.show2=false; }, Leave2(){ this.show = true; }, Enter2(){ this.show = false; } } }); </script></body></html>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了JavaScript实现图片轮播组件,废话不多说了直接看下面:效果:自动循环播放图片,下方有按钮可以切换到对应图片。添加一个动画来实现图片切换。鼠标停
前面学习了用css实现动画效果,那Vue中能不能用js实现动画效果呢?其实Vue提供了很多动画钩子enter入场动画钩子函数有before-enter、ente
本文主要介绍了Vue实现一种简单的无限循环滚动动画的示例,分享给大家,具体如下:先看实现效果:这种类似轮播的效果,通常可以使用轮播的方案解决,只不过相对于我要分
Three.JS实现3D动画。Three.JS在3D动画的实现上,主要通过两个步骤来进行,首先是通过循环渲染来促成动画的实现,其次是应用动画引擎来进行动画的实现
本文实例讲述了vue2.0实现的tab标签切换效果。分享给大家供大家参考,具体如下:这里利用vue2.0实现tab标签切换效果比较实用初学vue,练习写了一个d