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>

vue动画实现循环切换相关推荐

Vue router-view 路由无缝切换动画
Vue router-view 路由无缝切换动画,左滑淡出,右滑淡入. HTML: <div class="wrap"><transition mode=&quo ...
深入理解Vue动画原理
深入讲解 Vue 动画原理文档过渡 & 动画轮播组件slides 轮播难点在于最末位到首位的切换方式,在讲轮播之前需要讲下动画. Vue动画支持很多种不同的方式. Vue动画方式1 - ...
vue动画效果配置和弹层css sticky footer
vue动画效果配置有两种方式: 一种是css方式需要注意 4 个(CSS)类名在 enter/leave 的过渡中切换: v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移 ...
[vue] 使用vue写一个tab切换
[vue] 使用vue写一个tab切换 v-for循环,利用下标和v-show显示`<div id="app"><ul class="tabs" ...
vue动态点击切换css样式且子元素动态显示和隐藏
vue动态点击切换css样式并子元素动态显示和隐藏 <template><div v-for="i in 5" class="el-personal&q ...
详解vue动画的封装
本文实例为大家分享了vue动画封装的具体代码,供大家参考,具体内容如下前端精品教程:百度网盘下载 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...
Vue组件+Vue动画
目录 Vue选项自定义指令过滤,管道filters 全局组件局部组件 props传递参数 props细节组件传参父传子组件传值总结组件的插槽(嵌套) 具名插槽弹框组件的使用htt ...
Unity_用脚本控制Spine动画播放和切换皮肤
Spine在Unity里使用有3钟方式: SkeletonAnimation,Spine原生方式,支持所有Spine功能 SkeletonMecanim (或 SkeletonAnimator),会将 ...
CSS3流程动画,css3动画和vue动画
transfrom : 转换 1.translate : translate(x,y)有两个值,第一个是x轴,第二个是y轴 2.rotate: rotate(XXdeg) deg值为你要旋转的角度 3 ...

vue动画实现循环切换

vue动画实现循环切换相关推荐

最新文章

热门文章