javascript - VueJS 良好实践 : animation to show only one of a set of elements

标签 javascript vue.js

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

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

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

Smoothly animate v-show in VueJS

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

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

然后根据点击部分标题来操作此状态指示,并将元素上存在的 css 类链接到状态信息,以平滑地处理滑入/滑出效果的动画。

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

最佳答案

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

Transitioning Between Components

关于javascript - VueJS 良好实践 : animation to show only one of a set of elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52653967/

相关文章:

vue.js - 不提供名为 'Vue' 的导出(位于 main.js?t=1667997788986 :1:9)

vue.js - 无法安装组件 : template or render function not defined

javascript - 有没有办法改变谷歌图表中 vaxis 基线的宽度/厚度?

javascript - 将数据从其他网站内联 CSS 粘贴到 CK 编辑器中,在 Google Chrome 中丢失,但在 IE 和 Firefox 中不丢失

javascript - 如何在 AngularJS View 之间移动 $routeProvider 期间停止 $destroy 范围

javascript - 通过选择单选按钮停用输入文本

vue.js - vuejs 将选择值绑定(bind)到类值

node.js - VueJS表单数据如何发送带有其他数据的图像文件

javascript - 我的 Node.js 收到 Route.post() got a object Undefined 错误

vue.js - nuxt 需要服务器吗?