Question

我正在尝试使用过渡为背景属性设置动画。

当我将鼠标悬停在目标上时，它会平滑运行，但是当我遗漏时，它会像闪光灯一样！

进出应该平稳吗？

这个闪烁的问题或其他原因似乎是混合混合模式，所以我需要解释。

a {
    position:relative;
    display:block;
}

img {
    position:relative;
    width: 172px;
    border-radius:15px;
    float:left;
    margin-bottom:10px;
    filter:grayscale(100%);
}
    
a::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 172px;
    height: 242px;
    background: #2d293e;
    content: " ";
    display: block;
    border-radius: 14px;
    mix-blend-mode: screen;
    transition: opacity 300ms ease-in-out,background 400ms ease-in-out;
}

a:hover::after {
    background:#FF0101;
    opacity:0.1;
}

<a>
    <img src="https://images.wikidi.net/crop/172x242/http://f2.fsm.wikidi.com/af/ad/yb/e0d20df22741de9c3480e691bc7a3a41efceddcd.jpg" alt=""/>
</a>

Answer 1

尝试将鼠标移入和移出进行不同的过渡，这样您将拥有更好的控制并且可以避免闪烁

LoaderManager.getInstance(MainActivity.this)
    .restartLoader(BOOK_LOADER_ID, null, MainActivity.this);

a {
  position: relative;
  display: block;
}

img {
  position: relative;
  width: 172px;
  border-radius: 15px;
  float: left;
  margin-bottom: 10px;
  filter: grayscale(100%);
}

a::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 172px;
  height: 242px;
  background: #2d293e;
  content: " ";
  display: block;
  border-radius: 14px;
  mix-blend-mode: screen;
  transition: opacity 400ms  ease-in, background 250ms  ease-in;
}

a:hover::after {
  background: #FF0101;
  opacity: 0.1;
  transition: opacity 250ms ease-in, background 400ms ease-in;
}

Answer 2

似乎将背景设置为a：hover：after导致闪烁后，调整得太快了。尝试将其删除，然后查看结果是否正常。

Answer 3

您遇到的问题与计时有关。特别是这一行：

transition: opacity 300ms ease-in-out,background 400ms ease-in-out;

不透明度仅持续300毫秒，然后持续100毫秒，背景过渡持续，但不透明度过渡已停止。

这意味着如果希望发生完全相反的情况，则希望将不透明度延迟100毫秒，然后再开始过渡300毫秒。

为此，您只需在a::after css中添加以下内容，并将上面的行保留在a:hover::after定义中：

transition: opacity 300ms ease-in-out 100ms,background 400ms ease-in-out;

（从缓入过渡到不透明过渡的100毫秒，延迟100毫秒）。

然后，进场和出场的过渡效果都一样。参见代码段：

a {
    position:relative;
    display:block;
}

img {
    position:relative;
    width: 172px;
    border-radius:15px;
    float:left;
    margin-bottom:10px;
    filter:grayscale(100%);
}
    
a::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 172px;
    height: 242px;
    background: #2d293e;
    content: " ";
    display: block;
    border-radius: 14px;
    mix-blend-mode: screen;
    transition: opacity 300ms ease-in-out 100ms,background 400ms ease-in-out;
}

a:hover::after {
    background:#FF0101;
    opacity:0.1;
    transition: opacity 300ms ease-in-out,background 400ms ease-in-out;
}

<a>
    <img src="https://images.wikidi.net/crop/172x242/http://f2.fsm.wikidi.com/af/ad/yb/e0d20df22741de9c3480e691bc7a3a41efceddcd.jpg" alt=""/>
</a>

鼠标离开目标时背景过渡闪烁

3 个答案: