danr
Sat, 12 Aug 2017 22:18:49 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 ??
});
---
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>
---