Html CSS转换不使用不透明度触发+；展示

我试图在点击时淡入一种模式，并在移动设备上体验流畅

我将“不透明度”设置为0，“显示”设置为“无”。仅设置不透明度是不够的，因为它会使下面的区域不可拾取

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

淡入代码：

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

然而，模态并没有消失，它只是突然出现

在这里设置setTimeout是可行的，但是谁想要淡入的点击延迟呢

---

在不链接大量属性（如z-index）或类似废话的情况下，使用不透明度转换淡入元素的最佳方法是什么？

切换显示属性淡入元素是不好的方法，类似的主题已经处理过，例如：

“显示：无；从页面中删除块，就好像它从未出现过一样。块不能部分显示；它要么在那里，要么不在那里。可见性也是如此；不能期望块被半隐藏，而根据定义，它是可见的！幸运的是，你可以使用不透明度来代替淡入效果。”

引文作者：

你应该试着像这里这样做 或者试着像下面这样调整课堂：

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:

内容
内容
显示

为什么不使用jQuery的

$（“选择器”）.fadeIn（）

方法？

上述假定正确的答案意味着OP正在尝试在

显示上进行转换。事实并非如此。调用
show（）
将显示属性设置为block。然后设置不透明度理论上会触发从
不透明度：0
的转换

类似的问题也得到了回答。引用@whothehellis的话，没有触发转换的原因是

…因为风格的形成方式。样式更改是非常重要的
价格昂贵，因此在需要之前可以有效地节约（a
重新校准检查。调用offsetHeight或下一帧需要
绘制）

然而，这个问题的答案代码是香草Javascript，我无法让它在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');
});

下面是一个示例，演示解决方案。
这并不能提供问题的答案。若要评论或要求作者澄清，请在其帖子下方留下评论-你可以随时对自己的帖子发表评论，一旦你有足够的评论，你就可以发表评论。问题是：“在不链接大量属性（如z-index）或类似废话的情况下，通过不透明度转换淡入元素的最佳方法是什么？”我的答案是：使用.fadeIn（）！请按照所示编写答案，
fadeIn（）
当
显示
被设置为
无
时，该选项不起作用，OP需要执行该操作以使元素不可单击。不确定此答案为什么有向上投票或标记为正确。如果查看代码，请显示（）使用，然后设置不透明度，理论上应触发转换，因为不透明度以前为0。有关修复方法，请参阅我的答案。
$('#Modal').show(0, function() {
    $(this).addClass('fade-in');
});