Question

关于Chrome和css过渡的问题太多了，我不确定之前是否有过这样的问题。

我的情况是这样的：我的布局基本上是左右分割页面。右侧的一盒内容需要显示在左侧的内容上（我对此没有说法，桌面和移动设备之间的设计使这一点变得必要）。转换左侧图像时出现问题。默认情况下，图像为0不透明度，并通过将.active类应用于将其不透明度设置为1的相应图像来显示。我使用css过渡来为其设置动画。

当动画发生时，右侧的框消失，直到转换完成。左侧的图像不会覆盖在它的顶部，它不是背景问题，无论我设置左侧和右侧的z-index，右侧框位于左侧内容之上消失直到过渡结束。

Code example
<div>blah</div>
<div>another div</div>
<p>meh</p>

这是一个说明问题的傻瓜（仅在Chrome中发生）：http://plnkr.co/edit/G2Ohg01PodUKN1xi2izq?p=preview

（严重的是，你必须包含链接到plunker的代码，然后是什么？关于plunker的观点？）

我见过的其他问题都没有解决过这种情况。我所看到的其他所有内容都是关于过渡元素本身的问题，而不是位于这些过渡元素上的完全不同的代码块中的元素。

关于如何克服这个问题的任何想法，或者我应该告诉设计师＆＃34;处理它＆＃34;？

Answer 1

我只是想在黑暗中刺伤并假设它是白色文字。这是转换发布时唯一在页面上消失的东西。

.rightside .right-content的规则有一些导致此行为的CSS。删除它，你应该很高兴去。

您的代码：

.rightside .right-content {
  position: relative;
  z-index: 1;
  padding: 1em 1em 3em;
  /* overflow:hidden; ------------- Commented this.*/
  float: left;
  box-sizing: border-box;
  width: 100%;
}

.rightside容器不允许显示溢出，并且转换无法为此设置动画。

您的演示返回：
http://plnkr.co/edit/5C2cCZqnB4x7MTdeCGAn?p=preview

Codepen替代方案：
http://codepen.io/anon/pen/BzEkEP

Chrome：css转换元素上方的元素消失，直到转换完成

1 个答案: