Используйте javascript .style с css переходами

Вы можете решить это, добавив или удалив класс из объекта, а затем получив два набора переходов CSS - один для перехода и один для перехода. Они будут иметь как свойства непрозрачности, так и видимость, но разные значения задержки, и потенциально могут иметь разные длительности и методы ослабления.

Вот пример CSS. Я включил только CSS для перехода, а не какие-либо описательные свойства самого объекта.

/* fade out */
#hiddenobject {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
    -moz-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
    -ms-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
    -o-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
    transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
}

/* fade in */
#hiddenobject.showobject {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
    -moz-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
    -ms-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
    -o-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
    transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
}

В этом случае у нас есть объект с идентификатором "hiddenobject", который скрыт от представления. Он имеет как непрозрачность нуля, так и атрибут видимости скрыт. Мы добавим к нему класс "showobject", который вызовет отображение элемента, с непрозрачностью 1 и видимостью видимого.

Видимость может состоять только из двух состояний: она либо видимая, либо нет - между ними нет серой области. Поэтому, чтобы показать затухание, нам нужно использовать свойство непрозрачности. Трудность с непрозрачностью заключается в том, что на экране все еще присутствует что-то с непрозрачностью 0 - на него можно щелкнуть, взаимодействовать с ним и т.д., Что может быть нежелательно. Решение состоит в том, чтобы использовать оба свойства вместе.

Когда мы добавляем класс "showobject", мы переносим непрозрачность из него текущее значение 0 на новое значение 1 с длительностью 500 мс или половиной секунды. Атрибут задержки этого перехода устанавливается в 0 секунд, поэтому это происходит немедленно. Видимость этого объекта была скрыта, поэтому, чтобы засвидетельствовать это исчезновение, нам необходимо сразу же перевести свойство видимости на новое состояние видимости. Этот переход имеет как продолжительность, так и задержку 0 с, так что это происходит мгновенно - я поставил линейное ослабление, так как нет необходимости в каком-либо ослаблении, так что, возможно, это также упростит это личное предпочтение. Итак, теперь наш объект виден в тот момент, когда мы добавляем класс, и мы видим, что он исчезает.

Когда мы удаляем класс, мы хотим, чтобы fade происходило немного быстрее, поэтому наш переход по умолчанию для объекта имеет непрозрачность длительностью 200 мс, пятую часть секунды. Если бы мы сразу изменили видимость на скрытую, мы бы вообще не увидели исчезновение, оно просто исчезло бы. Поэтому мы должны задержать переход на значение, равное длине затухания - в этом случае 200 мс. Теперь наш объект завершается, он исчезает до 0 непрозрачности, прежде чем сменить видимость на скрытую.

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

Если ваша проблема просто исчезает, а css-преобразование не является крайне необходимым, возможно, вам будет лучше использовать подход javascript. Вы можете применить эффект затухания, используя свойство "setTimeout" и ".style.opacity" элемента DOM. Метод может работать следующим образом:

function FadeIn(id, opacity) {
    var element = document.getElementById(id);

    if(opacity == null)
        opacity = 0;

    SetOpacity(element, opacity);
    if(opacity < 100)
    {
        setTimeout(function() {
            FadeIn(id, opacity+10);
        }, 100);
    }
}

function FadeOut(id, opacity) {
    var element = document.getElementById(id);

    if(opacity == null)
        opacity = 100;

    SetOpacity(element, opacity);
    if(opacity > 0)
    {
        setTimeout(function() {
            FadeOut(id, opacity-10);
        }, 100);
    }
}

function SetOpacity(element, value) {
    element.style.opacity = value / 100;
    element.style.filter = "alpha(opacity=" + value + ")";
}

//Then call it like this:
FadeOut("div_id");

Да, css-переходы на самом деле легче, чем js built. Но для лучшего контроля за временем и применения эффекта по многим объектам, как вы хотите, js может быть очень удобным.