html - Chrome 中的 CSS3 过渡故障

Question

我有一个简单的模式，它在 :checked 输入时打开。在 Firefox 和 IE 中，过渡动画效果很好，但在 Chrome 中，它在检查输入时出现故障(效果不流畅)。

演示 fiddle :JsFiddle

当我删除 visibility: hidden 时，它工作正常，但随后模态 block 将页面的其余部分挡在它下面 - 无法选择文本，无法单击按钮等。

关于如何在 Chrome 中顺利过渡有什么想法吗？

Answer 1

回答

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

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>