4、列表动画
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 样式 -->
<style>
.v-enter-from{
opacity: 0;
transform: translateY(30px);
}
.v-enter-active{
transition: all .5s ease-in;
}
.v-enter-to{
opacity: 1;
transform: translateY(0px);
}
.list-item{
display: inline-block;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){return{list: [1, 2, 3, 4]}},
methods:{
add(){
this.list.unshift(this.list.length + 1);
}
},
template: `
<div>
<transition-group>
<span class="list-item" v-for="item in list" :key="item">{{item}}</span>
</transition-group>
<button @click="add">添加</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210614002807803.png
让其他列表项“温柔地”后移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 样式 -->
<style>
.v-enter-from{
opacity: 0;
transform: translateY(30px);
}
.v-enter-active{
transition: all .5s ease-in;
}
.v-enter-to{
opacity: 1;
transform: translateY(0px);
}
.v-move{
transition: all .5s ease-in;
}
.list-item{
display: inline-block;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){return{list: [1, 2, 3, 4]}},
methods:{
add(){
this.list.unshift(this.list.length + 1);
}
},
template: `
<div>
<transition-group>
<span class="list-item" v-for="item in list" :key="item">{{item}}</span>
</transition-group>
<button @click="add">添加</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210614003105290.png
image-20210614002807803.png
