我们先在一个transition组件中,放入两个组件
这样子页面上Hello World和Bye World是否有效果呢?
结果是没有的,因为在使用了v-if和v-else的时候,Vue会尽量的复用dom节点,这就导致了没有动画效果出来
那么,我们怎么样才能够让Vue不复用dom呢?
加一个key值就好
就会有渐变效果了
其实transiton标签中给了我们一个mode的参数,用于切换多个元素的过渡效果
in-out的意思是要显示的元素先进来,然后再隐藏要隐藏的元素
out-in的意思是要隐藏的元素先隐藏,然后要显示的元素再进来
--------------------------------------------------------------------------------------
多个组件的过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="animate.css">
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="velocity.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.v-enter, .v-leave-to{
opacity: 0;
}
.v-enter-active, .v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="vm">
<transition mode="in-out">
<child v-if="show" >child</child>
<child-one v-else >chile-one</child-one>
</transition>
<button @click="handleClick" type="button">change</button>
</div>
<script>
Vue.component('child', {
template: '<div>child</div>'
});
Vue.component('child-one', {
template: '<div>child-one</div>'
});
var vm = new Vue({
el: '#vm',
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
});
</script>
</body>
</html>
这样就可以切换多个组件
那么现在我们想使用动态组件做到渐变效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="animate.css">
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="velocity.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.v-enter, .v-leave-to{
opacity: 0;
}
.v-enter-active, .v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="vm">
<transition mode="out-in">
<component :is="type"></component>
</transition>
<button @click="handleClick" type="button">change</button>
</div>
<script>
Vue.component('child', {
template: '<div>child</div>'
});
Vue.component('child-one', {
template: '<div>child-one</div>'
});
var vm = new Vue({
el: '#vm',
data: {
type: 'child'
},
methods: {
handleClick: function() {
this.type = this.type === 'child' ? 'child-one' : 'child';
}
}
});
</script>
</body>
</html>