framework7

Open full view…

how to animate card delete?

danr
Sat, 12 Aug 2017 22:18:48 GMT

Hi! I have a list-block of cards. How can I add animation that collapses a card being deleted? The delete in Swipeout does something like this when a row is deleted. Is there a way to use CSS shrink the card vertically until it disappears? Or make it fade away? Thanks for your help! --- // Delete item: thread $$('.my-item-list').on('click', '.deleteItem', function () { // get the id of the element to be deleted var itemId = $$(this).parents('li').attr('data-id'); // pass the thread id to delete function // remove entry from database {this works} deleteItem(itemId); // animate card delete here // how to remove the <li> ... </li> that defines the card // would like to animate this like swipeout delete // how ?&quest; }); --- Simplified structure of cards: --- <div class = "content-block"> <div class="list-block cards-list my-item-list"> <ul> <li data-id="itemid" class="card"> <a href="#" class="card-content editTerms"> <div class="card-content-inner"> {... divs with card content here} </a> <div class="card-footer"> <div><a href="#" class="link icon-only deleteItem"> <i class="f7-icons">trash</i></a> </div> </div> </li> ... {more cards in same <li> </li> format} </ul> </div> </div> ---