vue过渡动画实现文字添加删除线效果
时间: 2023-09-04 12:13:04 浏览: 52
Vue过渡动画可以实现文字添加删除线效果,具体实现方法如下:
1. 定义过渡类名。在Vue组件的样式中定义添加和移除元素的类名:
```
/* 添加效果 */
.add-enter-active,
.add-leave-active {
transition: all 0.5s;
}
.add-enter,
.add-leave-to {
text-decoration: none;
}
/* 删除效果 */
.del-enter-active,
.del-leave-active {
transition: all 0.5s;
}
.del-enter,
.del-leave-to {
text-decoration: line-through;
}
```
2. 设置过渡属性。在Vue组件中设置过渡属性,在添加和移除元素时触发过渡效果:
```
<template>
<div>
<button @click="addText">添加文本</button>
<button @click="delText">删除文本</button>
<p v-for="(text, index) in texts" :key="index" :class="textClass">{{ text }}</p>
</div>
</template>
<script>
export default {
data() {
return {
texts: []
};
},
methods: {
addText() {
this.texts.push("新文本");
},
delText() {
this.texts.pop();
}
},
computed: {
textClass() {
return this.texts.length % 2 === 0 ? "add" : "del";
}
}
};
</script>
<style>
p {
font-size: 18px;
margin-bottom: 10px;
}
</style>
```
在上述代码中,根据文本长度的奇偶性来设置过渡类名,从而实现添加和删除效果。
希望这个回答能够对你有所帮助!