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

Используя ключевые кадры, можно анимировать элемент, как только он будет вставлен в 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/


css dom css-animations keyframe
person Steve    schedule 09.08.2011    source источник

Ответы (3)


arrow_upward
20
arrow_downward

Создайте еще одну анимацию 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.

person mercator    schedule 09.08.2011
comment
Это довольно умно, но если я иду по маршруту JavaScript, я могу просто вызвать $('#fill').fadeOut(). То, что я действительно ищу, - это решение только для CSS - я не знал, что затухание элемента возможно, пока не просмотрело много форумов, поэтому я надеюсь, что кто-то знает, как также затухать элемент. - person Steve; 10.08.2011
comment
Но .fadeOut() использует JavaScript для создания анимации. Это фактически использует CSS для анимации. Он просто использует JavaScript, чтобы активировать его в нужное время. И поскольку вы все равно используете JavaScript для фактической вставки/удаления элемента, только CSS является своего рода произвольным. Просто невозможно вызвать что-то в CSS непосредственно перед его удалением. Если вы превратили эти разделы click me в ссылки, вы могли бы использовать .hide:active + #fill в качестве селектора, чтобы вызвать исчезновение, но тогда вам все равно потребуется событие animationend, чтобы фактически удалить элемент, когда он исчезнет. - person mercator; 10.08.2011
comment
@S.K.: Короче говоря, нет. CSS не связан с манипуляциями с DOM, такими как добавление и удаление элементов. Трюк FadeIn работает, потому что анимация происходит всякий раз, когда элемент появляется впервые, просто потому, что это первый момент, когда это МОЖЕТ произойти. Чтобы элемент знал об исчезновении, ему нужно было бы знать, что он будет удален, а это возможно только с помощью Javascript. И, как сказал Меркатор, поскольку вы уже используете Javascript для удаления элемента, требование только для CSS является произвольным. - person joequincy; 16.11.2012
comment
@mercator: ваша версия jsFiddle не работает в двух основных браузерах, которые я тестировал, Firefox и MSIE! Хотя на 2 других работает. - person Pointer Null; 30.12.2013
comment
@PointerNull, на самом деле нет, так как я добавил только CSS с префиксом webkit и обработчик событий. Это также работает для браузеров, соответствующих стандартам: jsfiddle.net/dLdFZ/63 - person mercator; 07.01.2014

arrow_upward
8
arrow_downward

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

При удалении любого узла компонента/дома добавьте класс под названием «удаление».

Затем в css вы можете определить свою анимацию, используя этот класс:

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

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

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

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

person Arthur Goldsmith    schedule 31.07.2012
comment
Очень интересно. Когда вы добавите поддержку других функций, таких как append() и prepend(), я начну ее использовать. Как это соотносится с github.com/ai/transition-events? - person Steven Vachon; 04.12.2013
comment
Привет, Стив, это в основном для других людей, я обновил плагин для поддержки append() и prepend(). :) - person Arthur Goldsmith; 18.02.2014

arrow_upward
-9
arrow_downward

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

person Naman Goel    schedule 17.10.2012
comment
анимация работает при вставке DOM, переход не работает - person Gustavo Ulises Arias Méndez; 16.04.2016