VueJS 良好实践：动画只显示一组元素中的一个

Question

如果我描述我的用例可能最有帮助；我想创建一个输入小部件 根据用户指定的数据可能会显示相当多的复选框，大致可以分为三个部分。

我的想法是显示这三个最初隐藏的子部分，由一些标题指示，而单击其中一个标题将滑入无论如何都会加载的实际内容，因此它不是“真正的”条件渲染场景。 以此作为基本设置，我想在单击另一个部分标题时隐藏“打开”部分。

最接近让我知道如何解决我的问题的是：

Smoothly animate v-show in VueJS

但我不完全确定对于非二进制情况什么是“好”或“vue”方式。我的想法类似于上述问题的答案是使用类似这样的东西作为状态指标：

[...]
data:function(){
    return {
        sectionShowStatuses: {
            first: false,
            second: false,
            third: false
        }
    }
}
[...]

然后通过单击节标题来操作此状态指示，并将元素上 css 类的存在链接到状态信息，以处理平滑地动画滑入/滑出效果。

这是一种好的做法还是有更优雅/vue-esc 的方式来实现这一点？

Answer 1

如果我是你，我会根据 Dynamic Components 重新考虑这一点。这似乎是一种更好、更清洁的方式来处理您想要实现的目标。

Transitioning Between Components