Chrome 中的 CSS3 过渡效果错误

Question

我有一个简单的模态框，它会在:checked输入时打开。在Firefox和IE中，过渡动画效果良好，但在Chrome中，在检查输入后显示出来时出现了故障（效果不流畅）。

演示Fiddle: JsFiddle 当我移除visibility: hidden时，它可以正常工作，但是模态框会阻止页面下方的其他内容——无法选择文本，无法点击按钮等。

有没有办法使Chrome中的过渡平滑呢？

- g5wx

---

你在哪里应用了 visibility: none？你是不是想要使用 visibility: hidden？ - Mr_Green

@Grumpy 奇怪，我在本地有完全相同的设置，但在 Chrome 中打开模态框时会出现这个故障。 - g5wx

@marczking 我认为他的意思是一样的。我也能看到这里有相同的停止效果。 - Mr_Green

@g5wx，请检查我的下面的答案。 - Mr_Green

@g5wx，我的回答解决了你的问题吗？ - MMachinegun

Answer 1

答案

您在模态的div中声明了transform: none;。只需定义一个旋转X，这样您的动画就有了起点和终点。这解决了动画问题：

input#switch:checked ~ #test > div {
    transform: rotateX(0deg);
}

http://jsfiddle.net/s8hts3v7/9/

代码段

#test {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 9999999;
  visibility: hidden;
}
input#switch:checked ~ #test {
  visibility: visible;
}
#test > div {
  background: #fff;
  width: 300px;
  height: 100px;
  padding: 30px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transform: perspective(300px) rotateX(-90deg);
  transform-origin: top center;
  transition: 0.4s ease;
}
input#switch:checked ~ #test > div {
  transform: rotateX(0deg);
}
#test > div label {
  background: #000;
  color: #fff;
  display: block;
  text-align: center;
  padding: 8px;
  margin-top: 20px;
  cursor: pointer;
}

<input id="switch" type="checkbox" name="test-chkbox" />
<label for="switch">Open modal</label>

<div id="test">
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    <label for="switch">Close modal</label>
    </div>
</div>

- MMachinegun

Answer 2

正如这里所解释的那样，我们不能使用visibility进行动画。因此，我使用opacity传递rgba值到背景来代替它。

    #test {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        z-index: -1;
    }
    input#switch:checked ~ #test {
        background: rgba(0, 0, 0, 0.8);
        z-index: 9999999;
    }
    #test > div {
        background: #fff;
        width: 300px;
        height: 100px;
        padding: 30px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        transform: perspective(300px) rotateX(-90deg);
        transform-origin: top center;
        transition: 0.4s ease;
    }
    input#switch:checked ~ #test > div {
        transform: none;
    }
    #test > div label {
        background: #000;
        color: #fff;
        display: block;
        text-align: center;
        padding: 8px;
        margin-top: 20px;
        cursor: pointer;
    }

<input id="switch" type="checkbox" name="test-chkbox" />
<label for="switch">Open modal</label>
<div id="test">
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        <label for="switch">Close modal</label>
    </div>
</div>

- Mr_Green

---

我也尝试了你的方法，但是你的答案存在问题，虽然解决了动画问题，但会出现“点击”问题。如果你打开模态框并想要“关闭”它，有时需要点击两次。有时第一次点击不会触发关闭。 - MMachinegun

谢谢Mr_Green，我知道我不能动画化可见性，我正在寻找当前设置的解决方法。 - g5wx

Answer 3

请检查 fiddle：jsfiddle.net 刚刚添加：

opacity: 0.01;
z-index: -1;

对于 #test，当叠加层显示时更改 z-index 和 opacity：

opacity: 0.99;
z-index: 9999999;

- Yoshi

---

谢谢您的反馈，但是现在关闭模态框时的过渡效果不起作用。 - g5wx