1.多组件过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.v-enter-active,.v-leave-active{
transition: all 1s;
}
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-to,.v-leave{
opacity: 1;
}
</style>
</head>
<body>
<div id="app">
<button type="button" @click="view='news'">新闻</button>
<button type="button" @click="view='info'">信息</button>
<transition mode="out-in">
<component :is="view"></component>
</transition>
</div>
</body>
<script>
let news = {
template:'<div><h3>这里是新闻页面</h3></div>'
}
let info = {
template: '<div><h3>信息发布</h3></div>'
}
let vm = new Vue({
el: "#app",
data: {
view:'news',
},
methods: {},
components:{
news,
info,
}
});
</script>
</html>
2.列表元素的过渡
transition-group
是专门针对列表渲染的过渡系哦啊过使用的,和transition
使用上一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.v-enter-active,.v-leave-active{
transition: all 1s;
}
.v-enter,.v-leave-to{
opacity: 0;
transform: translateY(20px);
}
b{
display: inline-block;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="app">
<button type="button" @click="add">添加数字</button>
<button type="button" @click="remove">删除数字</button>
<div>
<!--transition-group是专门针对列表渲染的过渡系哦啊过使用的,和transition使用上一致-->
<transition-group>
<b v-for="num in arr" :key="num">{{num}} </b>
</transition-group>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
arr:[1,2,3,4,5,6,7],
nextNum:8
},
methods: {
add(){
this.arr.push(this.nextNum++);
},
remove(){
let index = Math.floor(this.arr.length/2);
this.arr.splice(index,1);
}
},
});
</script>
</html>