vue实现多个元素或多个组件之间动画效果


Posted in Javascript onSeptember 25, 2018

本文实例为大家分享了vue实现多个元素或多个组件之间动画的具体代码,供大家参考,具体内容如下

多个元素的过渡

<style>
.v-enter,.v-leave-to{


opacity: 0;

}

.v-enter-acitve,.v-leave-active{


opacity: opacity 1s;

}
</style>
<div id='app'>

<transition>


<div v-if='show'>hello world</div>


<div v-else>bye world</div>

</transition>

<button @click='handleClick'>切换</button>
</div>
<script>
var vm = new Vue({

el:'#app',

data:{


show:true

},

methods:{


handleClick:function(){



this.show = !this.show;


}

}
})
</script>

按照之前的写法方式,渐隐渐出的效果并没有出现该有的效果,那么为什么呢?

在if else两个元素切换的时候,会尽量的复用dom,正是vue,dom的复用,导致动画的效果不会出现,如果想要vue不去复用dom,之前也说过,怎么做呢,给两个div不同的key值就行了

<div v-if='show' key='hello'>hello world</div>
<div v-else key='bye'>bye world</div>

这样就可以有个明显的动画效果,多个元素过渡动画的效果。

transition还提供了一个mode属性,in-out是先显示再隐藏,out-in是先隐藏再显示

多个组件的过渡

<style>
.v-enter, .v-leave-to {


opacity: 0;

}

.v-enter-acitve, .v-leave-active {


transition: opacity 1s;

}
</style>
<div id='app'>

<transition mode='out-in'>


<child v-if='show'></child>


<child-one v-else></child-one>

</transition>

<button @click='handleClick'>切换</button>
</div>

<script>
Vue.component('child',{

template:'<div>child</div>'
})
Vue.component('child-one',{

template:'<div>child-one</div>'
})
var vm = new Vue({

el:'#app',

data:{


show:true

},

methods:{


handleClick:function(){



this.show = !this.show;


}

}
})
</script>

这个就是多个组件的过渡,采用的是上面的方式,替换子组件,那么我们换一种方式,用动态组件

<style>
.v-enter, .v-leave-to {


opacity: 0;

}

.v-enter-acitve, .v-leave-active {


transition: opacity 1s;

}
</style>
<div id='app'>

<transition mode='out-in'>


<component :is='type'></component>

</transition>

<button @click='handleClick'>切换</button>
</div>

<script>
Vue.component('child',{

template:'<div>child</div>'
})
Vue.component('child-one',{

template:'<div>child-one</div>'
})
var vm = new Vue({

el:'#app',

data:{


type:'child'

},

methods:{


handleClick:function(){



this.type = (this.type === 'child' ? 'child-one' : 'child')


}

}
})
</script>

这样也实现了多个组件的过渡效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用js检测浏览器的实现代码
May 14 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
简单的JS轮播图代码
Jul 18 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
详解package.json版本号规则
Aug 01 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 #Javascript
Vue页面跳转动画效果的实现方法
Sep 23 #Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 #Javascript
vue如何解决循环引用组件报错的问题
Sep 22 #Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 #Javascript
angular的输入和输出的使用方法
Sep 22 #Javascript
vue构建动态表单的方法示例
Sep 22 #Javascript
You might like
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
Django开发中的日志输出的方法
2018/07/02 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
会计电算化应届生求职信
2013/11/03 职场文书
体育老师的教学自我评价分享
2013/11/19 职场文书
爱情保证书范文
2014/02/01 职场文书
离婚案件答辩状
2015/05/22 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
Windows7下FTP搭建图文教程
2022/08/05 Servers