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.