My layout consists of elements arranged using Bootstrap (check out the jsFiddle here):
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="content-block"><p>1</p></div>
</div>
<div class="col-xs-3">
<div class="content-block"><p>2</p></div>
</div>
<div class="col-xs-3">
<div class="content-block"><p>3</p></div>
</div>
<div class="col-xs-3">
<div class="content-block"><p>4</p></div>
</div>
</div>
</div>
I have implemented an onclick event that removes the element that was clicked:
$('.col-xs-3').click(function(){
$(this).remove();
});
The functionality works as intended. However, the abrupt disappearance of the element can be a bit disruptive, as shown in the fiddle. I am looking to incorporate a CSS3 transition effect to animate the movement of the other col-xs-3 elements into the space left by the removed element, rather than having them jump instantly.
Even after adding the following CSS styling, the transition effect does not seem to take place:
.col-xs-3{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
How can I successfully achieve this transition effect?