CSS3 - Transition on DOM Removal

Question

Using keyframes, it is possible to animate an element as soon as it is inserted into the DOM. Here's some sample 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;
}

Is there some similar functionality available to apply an animation (via CSS, no JavaScript) to an element right before it is removed from the DOM? Below is a jsFiddle I made to play around with this idea; feel free to fork it if you know of a solution.

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

Answer 1

Create another CSS animation called fadeOut, say. Then when you want to remove the element, change the animation property on the element to that new animation, and use the animationend event to trigger the actual removal of the element once the animation is done:

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

See also my updated version of your jsFiddle. That works for me in Safari, at least.

Well, you should be using a class instead of that .css().

I don't think jQuery has any "real" support for CSS animations yet, so I don't think you can get rid of that webkitAnimationEnd. In Firefox it's just called animationend.

I'm pretty sure there's no way to do this in just CSS.

Answer 2

I've been working on a component library for javascript and I ran into this problem myself. I have the benefit of being able to throw a ton of javascript at the problem, but since you're already using a bit, consider the following for a gracefully degrading solution:

On removal of any component/dom node, add a class called 'removing'.

Then in the css you can define your animation using that class:

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

And back in the javascript, just after you add the 'removing' class, you should be able to check for the 'animation' css property, and if it exists, then you know that you can hook on 'animationEnd' and if it doesn't, then just remove the element right away. I remember testing this a while back, it should work; I'll see if I can dig up the example code.

Update: I've dug up this technique and started writing a really cool plugin for jQuery that allows you to use CSS3 animations for DOM elements that are being removed. No additional Javascript required: http://www.github.com/arthur5005/jquery.motionnotion

It's very experimental, use at your own risk, but would love some help and feedback. :)

Answer 3

ideally for something like fadeIN and fadeOUT you should be using css transitions not css animations..