Chrome 中的 CSS3 过渡故障

Posted

技术标签:

【中文标题】Chrome 中的 CSS3 过渡故障【英文标题】:CSS3 transition glitch in Chrome 【发布时间】:2015-10-17 17:00:36 【问题描述】:

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

演示小提琴:JsFiddle

当我删除 visibility: hidden 时,它工作正常,但随后模式阻止了它下面的页面的其余部分 - 无法选择文本,没有点击按钮等。

关于如何在 Chrome 中平滑过渡有什么想法吗?

【问题讨论】:

在我的 chrome 中似乎工作正常? 你在哪里申请visibility: none?你的意思是visibility: hidden @Mr_Green 是的,谢谢 - 我已经编辑了我的问题。 @Grumpy Strange,我在本地有准确的设置,打开模式后的初始转换在 Chrome 中有这个故障。 故障是什么意思?过渡不流畅,动画之间有短暂的停止或其他什么? 【参考方案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>

【讨论】:

【参考方案2】:

正如here 解释的那样,我们不能使用visibility 来制作动画。因此,我改为使用 opacityrgba 值传递给背景。

    #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>

【讨论】:

我也试过你的方法,但你的答案的问题是,虽然你解决了动画问题,但你得到了一个click 问题。如果您打开模态框并想close 它,有时您必须单击两次。有时第一次点击不会触发关闭 谢谢 Mr_Green,我知道我无法为可见性设置动画,我正在寻找当前设置的解决方法。【参考方案3】:

请检查小提琴:jsfiddle.net

刚刚添加:

opacity: 0.01;
z-index: -1;

到#test,并在叠加显示时更改z-index + opacity:

opacity: 0.99;
z-index: 9999999;

【讨论】:

感谢您的输入,但关闭模式时的转换现在不起作用。

以上是关于Chrome 中的 CSS3 过渡故障的主要内容,如果未能解决你的问题,请参考以下文章

css3 过渡延迟,如果动画 svg 填充和颜色同时 chrome 中的错误在 FF 中起作用

safari 中的 css3 过渡不顺畅

Firefox 中的 CSS3 过渡

FireFox 中的同步 CSS3 过渡不平滑

Webkit 浏览器中的 CSS 过渡填充故障

ios上的CSS3过渡慢/不工作