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
来制作动画。因此,我改为使用 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>
【讨论】:
我也试过你的方法,但你的答案的问题是,虽然你解决了动画问题,但你得到了一个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 过渡故障的主要内容,如果未能解决你的问题,请参考以下文章