如果我描述我的用例,这可能是最有帮助的;我想创建一个输入小部件 根据用户指定的数据,可能会显示相当多的复选框,大致可以分为三个部分。
我的想法是显示最初隐藏的这三个子部分,由一些标题指示,而单击其中一个标题将滑入无论如何都会加载的实际内容,因此它不是“真实的”条件渲染场景。 有了这个作为基本设置,我想在单击另一个部分标题时隐藏一个“打开的”部分。
最接近让我知道如何解决我的问题的是:
Smoothly animate v-show in VueJS
但我不完全确定对于非二进制情况,什么是“好”或“vue”方式。我的想法与上述问题的答案相似,是使用类似这样的东西作为状态指示器:
[...]
data:function(){
return {
sectionShowStatuses: {
first: false,
second: false,
third: false
}
}
}
[...]
然后根据点击部分标题来操作此状态指示,并将元素上存在的 css 类链接到状态信息,以平滑地处理滑入/滑出效果的动画。
这是好的做法还是有更优雅/vue-esc 的方式来实现?
最佳答案
如果我是你,我会根据 Dynamic Components 重新考虑这个问题.这似乎是一种更好、更简洁的方式来处理您想要实现的目标。
关于javascript - VueJS 良好实践 : animation to show only one of a set of elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52653967/