CSS3 - переход на DOM-удаление

Используя keyframes, можно анимировать элемент, как только он будет вставлен в DOM. Вот пример CSS:

@-moz-keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

@-webkit-keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

#box {
    -webkit-animation: fadeIn 500ms;
    -moz-animation: fadeIn 500ms;
    animation: fadeIn 500ms;
}

Существует ли какая-либо аналогичная функциональность для применения анимации (через CSS, без JavaScript) к элементу прямо перед удалением из DOM? Ниже приведена jsFiddle, которую я сделал, чтобы поиграть с этой идеей; не стесняйтесь разветвлять его, если знаете решение.

jsFiddle - http://jsfiddle.net/skoshy/dLdFZ/

Ответ 1

Создайте еще одну анимацию CSS под названием fadeOut, скажем. Затем, когда вы хотите удалить элемент, измените свойство animation на элемент на эту новую анимацию и используйте событие animationend, чтобы вызвать фактическое удаление элемента после завершения анимации:

$('.hide').click(function() {
    if (!$(this).hasClass('disabled')) {
        $('#fill').css('-webkit-animation', 'fadeOut 500ms');
        $('#fill').bind('webkitAnimationEnd',function(){
            $('#fill').remove();
            $('.show, .hide').toggleClass('disabled');
        });
    }
});

См. также мою обновленную версию jsFiddle. Это работает для меня в Safari, по крайней мере.

Ну, вы должны использовать класс вместо .css().

Я не думаю, что у jQuery есть какая-то "настоящая" поддержка анимации CSS, поэтому я не думаю, что вы можете избавиться от этого webkitAnimationEnd. В Firefox он просто называется animationend.

Я уверен, что нет способа сделать это только в CSS.

Ответ 2

Я работал над библиотекой компонентов для javascript, и сам столкнулся с этой проблемой. Я имею в виду возможность бросить тонну javascript в проблему, но, поскольку вы уже используете немного, рассмотрите следующее для изящно унизительного решения:

При удалении любого компонента /dom node добавьте класс, называемый "удаление".

Затем в css вы можете определить свою анимацию с помощью этого класса:

.someElement.removing {
    -webkit-animation: fadeOut 500ms;
    -moz-animation: fadeOut 500ms;
    animation: fadeOut 500ms;
}

И снова в javascript сразу после добавления класса 'remove' вы должны проверить свойство 'animation' css, и если оно существует, то вы знаете, что можете подключиться к 'animationEnd' и если это не так, просто удалите элемент сразу. Я помню, как тестировал это некоторое время назад, он должен работать; Я посмотрю, могу ли я выкопать пример кода.

Update: Я выкопал эту технику и начал писать действительно классный плагин для jQuery, который позволяет использовать анимации CSS3 для удаляемых элементов DOM. Не требуется дополнительный Javascript: http://www.github.com/arthur5005/jquery.motionnotion

Это очень экспериментально, используйте на свой страх и риск, но любите какую-то помощь и обратную связь.:)

Ответ 3

идеально для чего-то вроде fadeIN и fadeOUT вы должны использовать css-переходы, а не анимацию css.