Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

animate single elements out #5

Open
AsafAgranat opened this issue Jan 22, 2017 · 1 comment
Open

animate single elements out #5

AsafAgranat opened this issue Jan 22, 2017 · 1 comment

Comments

@AsafAgranat
Copy link

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!

@JosephScript
Copy link

JosephScript commented Apr 24, 2017

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants