How to use a different animation for enter and leave?

asika32764 / vue-animate

A port of Animate.css for use with transitions in Vue.js 2.0 / 3.0 and Alpine.js.

https://vue-animate.simular.co/

Other

1.36k stars 132 forks source link

Closed joelataylor closed 5 years ago

joelataylor commented 5 years ago

Quick question, how do you apply a different animation for enter and leave?

I'd like to fadeDown on enter and fadeUp for leave.

<transition name="fadeDown">
  <div> content here </div>
</transition>

asika32764 commented 5 years ago

Try

<transition enter-active-class="fadeDown" leave-active-class="fadeUp">

joelataylor commented 5 years ago

@asika32764 - yep! that worked. I'm assuming this is just using the core animate.css package with default vue.js transitions and not your plugin?

asika32764 commented 5 years ago

This package was written by https://github.com/haydenbbickerton and I rewrote it for Vuejs2.0

Some animate.css classes changed to make it suitable for Vue transitions so that we don't need to manually write enter and leave classes.

asika32764 commented 5 years ago

Close as issue resolved.