I'm currently working on achieving a dynamic animation effect for list items similar to the one demonstrated in Pasquale D'Silva's design example: https://medium.com/design-ux/926eb80d64e3#1f47
In this animation, the list item disappears while the space it occupied maintains its height momentarily before collapsing to zero height.
To accomplish this effect, I have utilized a div with a transparent background containing another div that encapsulates the actual content.
The approach involves animating the inner div, introducing a pause, and then reducing the height of the outer div to zero.
You can view my implementation on codepen: http://codepen.io/michaellee/pen/Cnpcf (Click on an item to see it disappear.)
I am curious if there is a way to achieve the same effect without nesting divs within each other?
HTML
<div class="stackOne">
<div class="item-holder">
<div class="item"></div>
</div>
<div class="item-holder">
<div class="item"></div>
</div>
<div class="item-holder">
<div class="item"></div>
</div>
<div class="item-holder">
<div class="item"></div>
</div>
<div class="item-holder">
<div class="item"></div>
</div>
</div>
CSS
.stackOne{
display: inline-block;
vertical-align: top;
width: 200px;
overflow: hidden;
.item-holder{
height: 50px;
margin: 0 0 1px 0;
.item{
width: 200px;
height: 50px;
background: #ccc;
position: relative;
}
}
}
JS
$('.stackOne .item').click(function(){
var item = $(this);
item.animate({
left: "100%"
}, 250, "swing", function() {
item.parent().delay(100).animate({
height: 0
}, 50, "linear", function(){
item.parent().hide();
});
});
});