javascript - 隐藏模态并使用 CSS3 转换显示它

Question

我正在尝试构建一个小型模态插件，但我正在努力寻找一种方法来隐藏模态并能够仅使用 CSS3 过渡将其淡入/淡出。

显然，我无法为显示设置动画:无法继承并使用不透明度和可见性不是一种选择，因为内容在技术上仍然存在，只是无法看到，因此它阻止了其下方的元素被使用(按钮等)

所以我的想法是使用 jQuery 在 display: hidden 和 inherit 之间切换，然后使用 jQuery 添加一个“shown”类来触发转换。但它不起作用。我只是得到一个即时显示(就像后面的停电元素一样)。虽然 CSS 过渡有效，但我已经在没有“显示”内容的情况下对其进行了测试。

到目前为止我的 jQuery:

// Modal open trigger
$('.modal-trigger').click(function() {
    modal = $('#' + $(this).data('modal-trigger'));
    modal.css({'display':'inherit'}).addClass('modal-show');
    $('#blackout').css({'display':'inherit'}).addClass('show');
});

有什么想法吗？

Answer 1

如果元素在应用过渡时隐藏(display: none)，则 CSS 过渡不会生效。此外，无论 JavaScript 函数中 CSS 更改的顺序如何，浏览器都会一次计算它们。

一个快速的解决方案是强制浏览器先处理 display 变化，然后再处理 transition。

试试这个:

modal.css({'display':'inherit'});
setTimeout(function(){ modal.addClass('modal-show'); }, 0);

另一种方法是完全避免使用display: none。使用:

.hide
{
    opacity: 0;
    pointer-events: none;
}

.show
{
    opacity: 1;
    pointer-events: auto;
}

pointer-events 允许元素不可见，但不会被吞噬鼠标事件干扰。你可能应该避免使用它，除了小的美学事物，因为元素可能仍然会干扰例如。表单选项卡排序。此外，IE 对该属性的支持仅来自 IE 11，如果您关心的话。