CSS动画导致图像闪烁

Question

我正在学习如何在CSS中使用transition:。但出于某种原因，我的图像一直闪烁，而不是给我流畅的动画。我在Windows 10中使用最新版本的Chrome进行开发。这是我的代码，非常简单：

＆＃13;

＆＃13;

function toggleClass() {
  var box = document.getElementById('box');
  box.className = box.className.match(/active/) ? '' : 'active';
}

＆＃13;

#box {
  width:200px;
  height:200px;
  background-color:#999;
  opacity:0;
  transform:translate(0,30px);
  transition:background-color 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
}
#box.active {
  opacity:1;
  transform:translate(0,0);
}
img {
  width:100%;
  display:block;
  filter: grayscale(100%) brightness(120%);
  mix-blend-mode:multiply;
}
#box:hover {
  background-color:red;
}

＆＃13;

<button type="button" onClick="toggleClass()">Toggle Image</button>
<div id="box" class="">
  <img src="https://i.stack.imgur.com/GwYD1.jpg" alt="">
</div>

＆＃13;

＆＃13;

＆＃13;

我想要做的是当我按下Toggle Image按钮时，我想要一个灰度级淡入。然后当我将鼠标悬停在图像上时，我希望它变为红色，因为它使用{{ 1}}和mix-blend-mode应该有红色背景颜色。

问题在于，每次我将#box添加到active时，图像都不会逐渐淡入＆＃34;。相反，一个坚实的灰色框向上滚动并淡入。一旦灰色框完成动画，图像然后就会拍摄＆＃34;进入视图，好像动画持续时间是0秒。我不希望图像出现＆＃34; snap＆＃34;进入视图...我希望图像像灰色框一样平滑淡入。

我希望灰色框和灰色图片能够平滑地一起动画。

我该如何实现？

修改

我注意到如果我添加了行#box.active，那么图像会淡入。但图像太亮了。应用#box.active {background-color:transparent;}与原始问题存在同样的问题。

编辑2

我注意到如果我添加这些行，它几乎可以满足我的需要

#box-active {background-color:#999;}

出于某些不寻常的原因，使用#box { background-color:rgba(155,155,155,1); } #box.active { background-color:rgba(155,155,155,0.9);} 以及活动类之前的alpha为1且alpha为0.9，似乎有所帮助。现在我看到了浏览器＆＃34;尝试＆＃34;为了让事情顺利进行，它现在变得非常不稳定。

Answer 1

尝试在子元素transform: translateZ(0)上添加img。

function toggleClass() {
  var box = document.getElementById('box');
  box.className = box.className.match(/active/) ? '' : 'active';
}

#box {
  width:200px;
  height:200px;
  background-color:#999;
  opacity:0;
  transform:translate(0,30px);
  transition:background-color 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
}
#box.active {
  opacity:1;
  transform:translate(0,0);
}
img {
  width:100%;
  display:block;
  filter: grayscale(100%) brightness(120%);
  mix-blend-mode:multiply;
  transform: translateZ(0); // this rules forces a new layer
}
#box:hover {
  background-color:red;
}

<button type="button" onClick="toggleClass()">Toggle Image</button>
<div id="box" class="">
  <img src="https://i.stack.imgur.com/GwYD1.jpg" alt="">
</div>

理论上你的代码是正确的，这已经很长一段时间了bug in chrome translateZ(0)解决方法强制chrome为GPU绘制单独的图层。您可以找到more about layers here。

另请注意，如果您要保持视觉一致性，则可能需要使用其他供应商前缀样式。
截至目前，Chrome，Firefox和Edge不同意混合应该是什么样子