CSS 过渡不使用不透明度 + 显示触发答案

【问题标题】：CSS Transition not firing with Opacity + DisplayCSS 过渡不使用不透明度 + 显示触发
【发布时间】：2014-05-25 04:40:40
【问题描述】：

我正在尝试在单击模态框时将其淡入，并在移动设备上获得流畅的体验。

我将不透明度设置为 0 并将显示设置为无。仅设置不透明度是不够的，因为它会使下面的区域无法点击。

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

淡入代码：

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

但是，Modal 不会淡出，它只是突然出现。

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

在不将诸如 z-index 之类的大量属性或一些此类废话链接在一起的情况下，使用不透明过渡淡入元素的最佳方法是什么？

【问题讨论】：

标签： html css-transitions

【解决方案1】：

Toogling display 属性对于淡入淡出元素是不好的方式，已经处理了类似的主题，例如：CSS3 transition doesn't work with display property

"display:none; 从页面中删除一个块，就好像它从不存在一样。一个块不能部分显示；它要么存在，要么不存在。可见性也是如此；你不能指望一个块半隐藏，根据定义，它是可见的！幸运的是，您可以使用不透明度来代替淡化效果。”

引用作者： Hashem Qolami

您应该尝试像这里Animating from “display: block” to “display: none” 那样通过deelay 来执行此操作或尝试像这里一样搜索类：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>

【讨论】：

不知道为什么这个答案有赞成票或被标记为正确。如果您查看代码，使用 show()，然后设置 Opacity，理论上应该触发转换，因为 Opacity 以前为 0。请参阅我的答案以获得修复。

【解决方案2】：

为什么不用jQuery的$("selector").fadeIn()方法？

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。
问题是：“在不将诸如 z-index 之类的大量属性或诸如此类的废话链接在一起的情况下，使用不透明过渡淡入元素的最佳方法是什么？”我的答案是：使用 .fadeIn()！
请按照meta.stackexchange.com/questions/7656/…写下你的答案
如here 所见，fadeIn() 在display 设置为none 时不起作用，OP 需要这样做才能使元素不可点击跨度>

【解决方案3】：

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

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

...因为样式的计算方式。风格变化是昂贵，因此可以有效地保存它们直到需要它们（a 重新计算检查，如 .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，演示了解决方案。

【讨论】：