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

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

尝试对鼠标进入和鼠标退出进行不同的过渡，然后您将拥有更好的控制，并且可以避免闪光灯

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;
}

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

Answer 2

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

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

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

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

为此，您只需要在 css 中添加以下内容a::after，并将上述行保留在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>

Answer 3

看起来在a：hover：after中设置背景会导致闪光灯，它适应得太快了。尝试删除它，看看结果是否正常。