Блог

Главная - Вопросы по программированию - Задержка затухания css

Задержка затухания css

#javascript #html #jquery #css #css-transitions

#javascript #HTML #jquery #css #css-переходы

Вопрос:

Привет, поэтому я пытаюсь перейти к котейнерам, которые заменяются данными, полученными с помощью flask HTML CSS-кода

 <img class="imgContainer" onload="this.style.opacity=1" src="{{ url_for('static', filename='players/_' ~ player1.username ~ '_.png') }}"/>

.imgContainer {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;

}

Вот как я «исчезаю в своем контейнере», и вот как я его исчезаю:

 $.ajax({
        url : "/vote",
        type : "POST",
        data : { "winner" : "1", "player1" : player1, "player2" : player2 },
        cache : false,
        success : function(data) {
            $("#container").fadeOut()
            setTimeout(function(){
                $("#container").replaceWith(data);
            }, 1000);
        }
    });

Моя проблема на данный момент заключается в том, что он не исчезает в обоих контейнерах одновременно, и между ними существует задержка.
Каков наилучший способ исправить это и заставить их появляться одновременно?

Комментарии:

1. Ваш пример кода не ссылается на предоставленный вами html. Во-первых, для затухания jQuery не требуется, чтобы переход был установлен в css. Вы можете редактировать скорость и ослабление в качестве дополнительных параметров. Второй. Если вы выполняете несколько асинхронных вызовов. Они будут запускать успешный обратный вызов в разное время.

Ответ №1:

События Onload выполняются после загрузки элемента. Возможно, ваши изображения загружаются не одновременно, поэтому ваши затухания не совпадают. Я бы попытался обернуть изображения в div, если это возможно, и установить для него onload или использовать @keyframes вместо onload (я не уверен в этом).