riot-animate
riot-animate copied to clipboard
animate single elements out
Hi, This is really cool. I love the angular method of animating elements into the DOM, and your implementation here is great. But, i'm managing to get the elements to animate in, yet i can't figure out how to animate the elements out. I'm trying to get single elements to remove from DOM on click, and can't figure out the method (I could only manage to animate-out all elements from the dom, but not single ones) My progress is in this codepen: codepen.io/rhmubus/pen/pRPLwO Thank you!
Would something like this work? What I did is I bound the special this.animatedUnmount
function to the anchortag. You could instead call that from a different function if you had other logic to do first.
<foo></foo>
<script type="riot/tag">
<foo>
// This is using an animate.css
<div class="card" animate="zoomIn" animate-leave="zoomOut" animate-duration="300ms" animate-delay="{i*20}ms">
<a onclick="{animatedUnmount}">Click here to animate out</a>
</div>
this.mixin(riotAnimate);
</foo>
</script>
<script>
riot.mount('foo');
</script>
I hope that helps!