Javascript Vue.js动画无法正常工作

我正在使用VUE2，并试图在频繁创建和销毁的元素上包含CSS动画。下面是我的代码示例：

导出默认值{
名称：“MyElement”，
方法：{
enterStart：功能（el）{
console.log（“即将进入”）；
el.classList.add（'testing-enter'）；
},
输入：功能（el）{
console.log（'entered'）；
},
leaveStart：功能（el）{
log（'开始离开！'）；
},
离开：功能（el）{
console.log（'leaving！'）；
},
}
};
。测试输入{
动画：输入.2s；
}
.考试假{
动画：离开。2秒；
}
@关键帧输入{
0% {
不透明度：0；
变换：比例（0）；
}
100% {
不透明度：1；
变换：比例（1）；
}
}
@关键帧离开{
0% {
不透明度：1；
变换：比例（1）；
}
100% {
不透明度：0；
变换：比例（0）；
}
}

我的元素在这里！
转换中的元素需要一个状态（显示或隐藏）。此外，您的转换需要一个名称，该名称必须与CSS中的转换相同，并且应该使用

name=“transitionName”

e、 g:


newvue({
el:“应用程序”，
数据：函数（）{
返回{
showthis元素：false
}
},
方法：{
toggleShow:function（）{
this.showthismelement=！this.showthismelement
}
}
});
。测试进入活动状态{
动画：输入.2s；
}
.测试保持活动状态{
动画：离开。2秒；
}
@关键帧输入{
0% {
不透明度：0；
变换：比例（0）；
}
100% {
不透明度：1；
变换：比例（1）；
}
}
@关键帧离开{
0% {
不透明度：1；
变换：比例（1）；
}
100% {
不透明度：0；
变换：比例（0）；
}
}

显示/隐藏
我的元素在这里！
问题已解决

因此，我从单个组件中取出了
转换
，并在呈现它们的容器组件周围创建了一个
转换组

然后，在阅读了更多的内容后，我意识到我想将
mode=“out in”
字段添加到我的
转换组中，以便在渲染新组件之前，留下的组件完全动画化

我还查看了动画发生时的HTML，以了解Vue添加了哪些类。看起来Vue添加了
v-enter-active、v-enter-to、
和
v-leave-to
。我没有自定义任何名称，而是坚持使用这些类，并在样式中为它们添加动画

希望如果其他人想要类似的效果，这能帮助他们稍微减轻压力…
我刚刚为test@marceloch2创建了这个代码笔谢谢！感谢您提供的工作示例。因此，我需要一个开关这一事实使我的计划受阻。在我的应用程序中，此组件是较大集合组件的一个子项。它没有任何隐藏或显示它的按钮，它只是在父容器组件中的
v-for…
中渲染。关于如何使动画行为与项目的渲染方式相适应，您有什么建议吗？