Html Vue.js使动画无法按预期工作

该示例非常简单，与Vue.js文档中的示例类似

newvue({
el:'演示'，
数据：{
秀：真的
}
})

p{
宽度：100px；
边框：1px纯红；
}
.淡入激活状态，
.淡入淡出激活状态{
过渡：所有5s；
}
.淡入{
不透明度：0；
宽度：500px；
背景：红色；
}
.淡入{
背景：黑色
}
.淡出{
不透明度：0；
背景：红色
}
.淡出{
背景：黑色；
宽度：1000px；
不透明度：1
}

切换
你好

不透明度很重要，因为动画会因此而褪色

在这里，我添加了透明度为0的直接类淡入淡入活跃的按钮你好。您可以看到动画一步一步地淡入淡出

---

相反，如果不透明度为1，则没有淡入淡出的方向。它保持在1。

您应该创建一个函数，而不是show=！显示该函数应启动动画并为show设置超时=！我的问题是关于离开动画