假设我想使用组件创建一个列表,当我点击它时,它将消失,并使用 transition-group
进行动画处理。
以下代码可以良好地执行:
HTML:
<transition-group name="testanim">
<p key="1" v-if='open1' @click='open1 = false'>Can You See Me?</p>
<p key="2" v-if='open2' @click='open2 = false'>Can You See Me?</p>
</transition-group>
CSS:
.testanim-enter-active, .testanim-leave-active {
transition: all .5s;
}
.testanim-enter, .testanim-leave-to {
transform: translateX(1rem);
opacity: 0;
}
.testanim-leave-active {
position: absolute;
}
.testanim-move {
transition: all .5s;
}
open1
和open2
在Vue.js的data
中定义。然而,以下代码不会执行任何动画。
HTML:
<transition-group name="testanim">
<test-sth key="1"></test-sth>
<test-sth key="2"></test-sth>
</transition-group>
CSS:与上面相同
JavaScript:
Vue.component ("test-sth", {
template: "<p v-if='open' @click='open = !open'>Can You See Me?</p>",
data: function () {
return {
open: true,
}
}
})
所以问题是如何在
transition-group
内部对组件进行动画。我搜索了几个小时,但没有找到相关的问题或文档。更新:
关键问题在于,在前面的示例中,当第一句话消失时,第二句话平滑地向上移动的动画不会显示在后面的示例中。虽然我可以将
transition
放在template
内部,但这并不能解决问题。我应该在template
内编写整个transition-group
,还是其他什么方法...?
v-move
部分的动画效果... 我会尽快更新问题。 - HaveaLooker