riot-animate icon indicating copy to clipboard operation
riot-animate copied to clipboard

animate single elements out

Open AsafAgranat opened this issue 7 years ago • 1 comments

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!

AsafAgranat avatar Jan 22 '17 17:01 AsafAgranat

Would something like this work? What I did is I bound the special this.animatedUnmountfunction 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!

JosephScript avatar Apr 24 '17 19:04 JosephScript