CSS3 - Transition on DOM Removal
http://stackoverflow.com/questions/7000648/css3-transition-on-dom-removal
HTML
<div class="test">
</div>
<div class="click">
klik
</div>
<div class="remove">
usun
</div>
CSS
@keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
@keyframes fadeOut {
from {opacity:1;}
to {opacity:0;}
}
.test {
width: 100px;
height: 100px;
display: none;
background: red;
animation: fadeIn 2000ms;
}
.click {
margin-bottom: 20px;
}
.test.removeClass {
animation: fadeOut 2000ms;
}
JavaScript
$('.click').click(function() {
$('.test').removeClass('removeClass')
$('.test').show();
});
$('.remove').click(function() {
$('.test').addClass('huj')
$('.test').one('animationend',function(){
$('.test').hide();
});
$('.test').addClass('removeClass')
});