Question

我正在尝试构建一个小模态插件，但我正在努力寻找隐藏模态的方法，并且只能使用CSS3过渡来淡入淡出。

显然，我无法动画显示：无法继承和使用不透明度和可见性不是一个选项，因为内容在技术上仍然存在，它只是无法看到所以它会阻止它下面的元素被使用（按钮等。）

所以我的想法是使用jQuery在display：hidden和inherit之间切换，然后使用jQuery添加一个“显示”类，这将触发转换。但它不起作用。我只是一个即时节目（就像后面的停电元素一样）。 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。

Answer 2

您可以转换'visibility'属性而不是显示属性

见这里： http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    backface-visibility: hidden;
    transform: translateX(-50%) translateY(-50%);
}

.md-show {
    visibility: visible;
}

.md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(143,27,15,0.8);
    transition: all 0.3s;
}

.md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
}

Answer 3

最好的解决方案是使用jQuery的内置动画

modal.fadeOut();

使用vanilla css并不容易。看看这个问题：Transitions on the display: property。

Answer 4

如果我过于简单，但您是否尝试使用fadeToggle()，我会提前道歉？

这是我用来显示和隐藏模态的堆栈：

function modalShow(){
    $(".modal-window").fadeToggle(200);
    return false;
}

function modalHide(){
    $(".modal-window").toggle();
    return false;
}

$(document).ready(function() {
    $("#close-modal").click(modalHide);
});

希望它有所帮助。欢呼声。

隐藏模态并使用CSS3过渡显示它

4 个答案: