javascript - 如何使用 jQuery 切换 flexbox 样式弹出窗口的可见性？

Question

所以我想在我的页面上有一个弹出窗口。我想用 flexbox 设计它的样式。我正在使用 scss 来设置样式，并且我有 flexbox 属性的 mixins。

我遇到的问题是我想将 flexbox 属性应用到我的弹出窗口，例如 display: flex ，它有它的浏览器变体:

display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;

当我尝试将 css 更改为 display: none 时，我的浏览器用 display: -webkit-flex; 覆盖它，所以我仍然没有隐藏我的元素。我考虑过使用 visibility 但由于 jquery 使用 .show 和 .hide 显示而不是可见性，它看起来像是一个错误的工具。

我是否应该以某种方式覆盖 jQuery .hide() 以更改其他显示属性，或者每次我想显示它时创建该元素，然后在提交后删除它的 html？

我的 scss 具有这种覆盖内容样式:

.overlay-content {
    /* this may or may not be here */
    /* visibility: hidden; */

    @include flex();
    @include flex-direction(column);
    @include flex-justify-content(flex-start);
}

我有一个代码，当我想显示我的弹出窗口时触发:

        $('.overlay-content').css('visibility: visible;');
        $('.overlay-bg').css('visibility: visible;');

可以使用可见性 css 属性还是应该始终使用显示属性来更改元素的可见性？

让我困扰的是，这样我就不能使用很酷的 jquery.hide() 选项来获得很酷的用户体验

Answer 1

我遇到了同样的问题，我想出的解决方案可能不是最优雅的，但它可以完成工作。

我只是在组件的初始化代码中调用了.hide()。 jQuery 将内联 display: none 添加到元素，随后调用 .toggle() 将其删除，因此在样式表 display: flex 中指定开始发挥作用。