Question

我正试图在点击时淡化模态，并在移动设备上获得流畅的体验。

我将两个不透明度设置为0并显示为无。单独设置不透明度是不够的，因为它使下面的区域不可点击。

#Modal {
    display: none;
    opacity: 0;
    transition: opacity 500ms ease 0s;
}

淡入代码：

$('#Modal').show();
$('#Modal').css('opacity','100');

然而，莫代尔并没有淡入，它只是昙花一现。

此处设置setTimeout有效，但是谁想要淡入的点击延迟？

使用不透明度转换淡化元素的最佳方法是什么，而不将诸如z-index等大量属性链接在一起，或者某些类似的废话？

Answer 1

显示属性是淡入淡出元素的坏方法，已经处理了类似的主题，例如：CSS3 transition doesn't work with display property

＆＃34;显示：无;从页面中删除一个块，就好像它从未出现过一样。无法部分显示块;它要么存在，要么不存在。能见度也是如此;你不能指望一个块被隐藏一半，根据定义，它是可见的！幸运的是，您可以使用不透明度来代替淡化效果。＆＃34;

报价作者： Hashem Qolami

你应该尝试通过像这里Animating from “display: block” to “display: none”这样的深度来做到这一点或尝试像这里一样转发课程：http://jsfiddle.net/eJsZx/19/

CSS：

.Modal {
        display: block;
        opacity: 0;
        transition: all 300ms ease 0s;
        height: 0px;
        overflow: hidden;
    }
    .ModalVisible {
        display: block;
        opacity: 1;
         height: 50px;
    }

Jquery的：

$('button').on('click', function () {

     $('#ModalId').addClass('ModalVisible');
});

HTML：

<div id='ModalId' class="Modal" > content <br> content </div> 
<button>show</button>

Answer 2

为什么不使用jQuery＆＃39; $("selector").fadeIn()方法？

Answer 3

上面所谓的正确答案意味着 OP 正在尝试在 display 上进行转换。他们不是。调用 show() 会将显示属性设置为阻止。然后设置不透明度理论上应该会触发从 opacity:0 的转换。

已经回答了一个类似的问题 here。引用@WhoTheHellIsThat，未触发转换的原因是...

<块引用>

...因为样式的确定方式。风格变化是昂贵的，所以它们被有效地保存起来，直到需要它们（一个重新计算检查如 .offsetHeight 被调用或下一帧需要被绘制）。

然而，该问题的答案代码是 Vanilla Javascript，我无法使其在 jQuery 中工作。我找到了 another answer that solved it in jQuery，使用类来触发转换。

这里是完整的 CSS...

#Modal {
    display: none;
    opacity: 0;
    transition: opacity 500ms ease 0s;
}
#Modal.fade-in {
    opacity: 1;
}

这里是完整的 JS：

$('#Modal').show(0, function() {
    $(this).addClass('fade-in');
});

这是一个fiddle from RoryMcRossan's answer，演示了解决方案。

CSS转换未使用Opacity + Display触发

3 个答案: