多个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多个元素的组件的过渡动画</title>
<script src="script/vue.js"></script>
<style>
.v-enter,
.v-leave-to{
opacity: 0;
}
.v-enter-active,
.v-leave-active{
transition: opacity 2s;
}
</style>
</head>
<body>
<div id="app">
<!--这里多个元素进行过渡效果用key可以防止复用-->
<!--这里的mode属性值中如果为out-in就可以先进入在隐藏;in-out就可以先隐藏在进入-->
<transition mode="out-in">
<div v-if="show" key="hello">hello</div>
<div v-else key="zqx">曾庆霄</div>
</transition>
<button @click="click">动画切换</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
show:true,
a:"曾庆霄"
},
methods:{
click:function(){
this.show = !this.show;
}
}
})
</script>
</body>
</html>列表的过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的列表的过渡动画</title>
<script src="script/vue.js"></script>
<style>
.v-enter,
.v-leave-to{
opacity: 0;
}
.v-enter-active,
.v-leave-active{
transition: opacity 2s;
}
</style>
</head>
<body>
<div id="app">
<!-- 这里是transition-group标签;这里的key不是固定的属性值用v-bind,这里key最好不要设置index所以自定义了一个count的值当为他们的key的值(这里不是多的对象可以设置为全局) -->
<transition-group>
<div v-for="book in books" :key="book.id">{{book.title}}</div>
</transition-group>
<button @click="click">动画切换</button>
</div>
<script>
var count = 0;
var app = new Vue({
el:'#app',
data:{
books:[]
},
methods:{
click:function(){
this.books.push({
id:count++,
title:"hello world"
})
}
}
})
</script>
</body>
</html>