search

radical-dreamers / animated-vue

A plugin to use animate.css animations as Vue2 transitions
MIT License
220 stars 19 forks source link

Custom animation definition don't work on OUT #4

Closed zhiga90 closed 7 years ago

zhiga90 commented 7 years ago

I copied your code from the main page. Animation works on enter, but not on leave

export default new GenericTransition('custom-fade-in-bounce-out', 'fadeIn', 'bounce', false)

bounce animation dont' work

If reversed bounce and fadeIn, then fadeIn animation dont' work

dragonautdev commented 7 years ago

@zhiga90

Thanks a lot for pointing this out. The example given in this repo's README had an error. The bounce animation is an "In" animation as defined in animate.css, thus it only works as an animation that plays well to show a component, but not when you try to hide it.

I've already fixed that mistake so I hope it's clearer now.

I believe it's also good to explain that such limitation comes from the way animate.css works, and not because of this plugin. Some animations are simply not meant for entrance, while others are not meant for exits. While many are self-explaining (have an "In" or "Out" suffix), others like "bounce" are kind of confusing until you try them out.

Thanks a lot for giving this plugin a try and helping me make it better!

dragonautdev commented 7 years ago

Closed due to the user not responding anymore.