为什么删除没有左右的动画
来源：2-5 列表动画
情分的小前端
2022-04-19 17:01:37
<!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" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>lesson 29</title>
<style>
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.list-item {
display: inline-block;
margin-right: 10px;
}
.v-leave-to,
.v-enter-from {
opacity: 0;
transform: translateY(30px);
}
.v-leave-active,
.v-enter-active {
transition: all 0.5s ease-in;
}
.v-leave-from,
.v-enter-to {
opacity: 1;
}
.v-move {
/* 描述列表其他动画 */
transition: all 0.5s ease-in;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
<!-- <div id="">
{{message}}
</div> -->
</div>
<script>
// 列表动画
const app = Vue.createApp({
data() {
return {
list: [1, 2, 3],
};
},
methods: {
handleClick() {
this.list.unshift(this.list.length + 1);
},
handleItemDele(index) {
this.list.splice(index, 1);
console.log(index);
},
},
template: `
<transition-group>
<span v-for="(item,index) in list"
:key="item"
:data-index="index"
class="list-item"
@click="handleItemDele(index)"
>{{item}}</span>
</transition-group>
<button @click="handleClick">增加</button>
`,
});
const vm = app.mount("#root");
// 实例脱离挂载
// app.unmount();
</script>
</body>
</html>
1回答
-
好帮手慕小李
2022-04-19
同学你好，这里要加上删除是有动画效果，可以参考如下思路（删除谁让谁脱离文档流）：
提示：这种方法只适合从前往后删除元素或者是从中间删除元素，如果从最后一个元素开始删除是没有过渡效果的。
同学自己试试，祝学习愉快！
0
相似问题