фоновый переход fla sh, когда мышь покидает цель - PullRequest
Новая
       1

фоновый переход fla sh, когда мышь покидает цель

5 голосов
/ 07 февраля 2020

Я пытаюсь анимировать свойство фона, используя переход.

Когда я наводю курсор на цель, она работает плавно, но когда я выхожу из нее, она выглядит как fla sh!

Не должно это будет плавно входить и выходить?

Похоже, что смешанный режим смешивания стоит за этой мигающей проблемой или, может быть, еще что-то, поэтому мне нужно объяснение. 

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>

Ответы [ 3 ]

3 голосов
/ 11 февраля 2020

Попробуйте другой переход для наведения мыши и наведения мыши, тогда у вас будет лучший контроль, и вы сможете избежать fla sh

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>
0 голосов
/ 18 февраля 2020

Проблема, с которой вы столкнулись, связана со временем. В частности, эта строка: 

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>
0 голосов
/ 11 февраля 2020

Похоже, установка фона в a: hover: after вызывает fla sh, он слишком быстро приспосабливается к этому. Попробуйте удалить его и посмотреть, если результат в порядке.

...