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 相关文章推荐
JQuery autocomplete 使用手册
Apr 01 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
js中new一个对象的过程
Feb 20 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
JS实现页面数据懒加载
Feb 13 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判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php中socket的用法详解
2014/10/24 PHP
php商品对比功能代码分享
2015/09/24 PHP
一段实用的php验证码函数
2016/05/19 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
详解python之简单主机批量管理工具
2017/01/27 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
Flask配置Cors跨域的实现
2019/07/12 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
水利学院求职自荐书
2014/02/01 职场文书
欢送退休感言
2014/02/08 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
杜甫草堂导游词
2015/02/03 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
利用Python实现模拟登录知乎
2022/05/25 Python