CSS3 - переход на удаление DOM - PullRequest
Новая
       13

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

41 голосов
/ 09 августа 2011

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

Ответы [ 3 ]

17 голосов
/ 09 августа 2011

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

6 голосов
/ 01 августа 2012

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

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

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

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

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

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

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

0 голосов
/ 17 октября 2012

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

...