css - Chrome : element above css transitioning element disappears until transition finishes

Question

关于 Chrome 和 css 转换的问题太多了，我不确定以前是否有人问过这个问题。

我的情况是这样的:我的布局基本上是左右分页。右侧的一框内容需要显示在左侧的内容之上(这个我没有发言权，桌面和移动之间的设计使得这个很有必要)。转换左侧的图像时会出现问题。默认情况下，图像的不透明度为 0，并通过将 .active 类应用于将其不透明度设置为 1 的适当图像来显示。我正在使用 css transition 对其进行动画处理。

当动画发生时，右侧的框消失，直到过渡完成。左侧的图像不会叠加在它的顶部，这不是背景问题，无论我设置左侧和右侧的 z-index 什么，位于左侧内容上方的右侧框都会消失，直到过渡完成了。

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

这里有一个 plunker 来说明这个问题(只发生在 Chrome 中):http://plnkr.co/edit/G2Ohg01PodUKN1xi2izq?p=preview

(说真的，你必须包含链接到 plunker 的代码，那 plunker 有什么意义呢？)

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

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

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