用Vue实现多组件动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
li {
border: 1px solid red;
width: 300px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.opacity-enter,
.opacity-leave-to {
opacity: 0;
transform: translateY(50px);
}
.opacity-enter-to,
.opacity-leave {
opacity: 1;
}
.opacity-enter-active,
.opacity-leave-active {
transition: all 0.5s linear;
}
/* v-move 和 .opacity-leave-active 搭配使用,可以实现离场标签悬浮,入场动画有过渡效果的功能*/
.opacity-move {
transition: all 0.5s linear;
}
.opacity-leave-active {
/* 那个标签被删除,离开，就把它设置为绝对定位 */
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<!--
1. transition-group 实现多个元素/组件的过渡效果,默认这个组件会被渲染成span表,通过tap 指定需要渲染的标签
2. 每个 transition-group 的字节点必须有独立的key 动画才能正常工作
3. 至少 动画/过渡的用法 和之前的transition 组件是一样的
-->
<!--
appear: 初始渲染过渡,当页面刷新时,就需要多个标签/组件做动画,必须使用 appear 这个属性,否则动画不生效
-->
<h1>点击组件删除</h1>
<transition-group tag="ul" name="opacity" appear>
<li v-for="item ,i in items" :key="item.id" @click="deleteItem(i)">
<span>姓名:{{ item.name }}</span>
<span>年龄:{{ item.age }}</span>
</li>
</transition-group>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
items: [
{ id: 1, name: "张三", age: 22 },
{ id: 2, name: "张四", age: 23 },
{ id: 3, name: "张五", age: 24 },
{ id: 4, name: "张六", age: 25 },
{ id: 5, name: "张器", age: 26 },
{ id: 6, name: "张八", age: 27 },
],
},
methods: {
deleteItem(i) {
this.items.splice(i, 1);
},
},
computed: {},
components: {},
});
</script>
</body>
</html>
效果如下：
浙公网安备 33010602011771号