CODEWITHSUNDEEP
csscss-transitions
barakuda28
barakuda28

Reputation: 2902

CSS3 height transition on DOM removal?

Please check the following fiddle: http://jsfiddle.net/tWUVe/

When you click the div, the p's get deleted, and I expect that the div's height will be animted, but no animation happens. How can I achieve an animation with CSS3 only?

Upvotes: 0

Views: 1025

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25954

The issue is that there is no opportunity for the transition to occur. What I mean by this is that when elements are removed, they are immediately taken out of the document flow, resizing the parent if needed without a transition.

As a fix for this, you could animate the height of the paragraphs instead (or a similar means)

$('div').click(function() {
    var $thisDiv = $(this);
    $thisDiv.find('p').css({'height':'0px','margin':'0px'}); // Change p height

    // Remove after transition
    setTimeout(function() { $thisDiv.find('p').remove(); }, 1000); 
});

Demo

Upvotes: 1

Related Questions