У меня есть два <img>
-элемента, где первое изображение должно исчезнуть, а второе изображение исчезнет.Когда переход заканчивается, я удаляю класс для постепенного исчезновения и переключаю источники изображения тегов.
<img id="in" class="in" [srcset]="inSrcSet" (transitionend)="transitionEndIn($event)">
<img id="out" class="out" [srcset]="outSrcSet" (transitionend)="transitionEndOut($event)">
в компоненте, который я переключаю, srcset
// sample
transitionEndIn(event){
this.inSrcSet = "outSrcSet";
}
transitionEndOut(event){
this.outSrcSet = "inSrcSet";
}
Это изменение в srcset заставляет изображение мерцать в Firefox.Похоже, что затухающее изображение возвращается к полной непрозрачности на долю секунды.Однако я не вижу мерцания, если использую обычный src
вместо srcset
.
Я сделал Stackblitz , иллюстрирующий мою проблему.Я сделал пример с src и srcset, чтобы вы могли увидеть разницу.Проблема не возникает в Chrome, хотя.(Я не тестировал другие веб-браузеры).Появление / исчезновение не является циклом, поэтому вы должны обновить Stackblitz, чтобы увидеть переход снова.