CODEWITHSUNDEEP
animationvue.jsvuejs2vue-component
Stephan-v
Stephan-v

Reputation: 20309

Vue.js transition class disappearing before animation has finished

I have create a Vue component that uses a javascript hook as a transition to call velocity.js and animate my components.

https://www.webpackbin.com/bins/-KiUnEo0HaCp3J4nQ9Gw

The slideDown of the component works fine. However when the v-on:leave kicks in. It seems the display CSS property is set to display: none immediately therefore my slideUp animation is not shown.

I guess this happens because the transition animation duration is not known therefore is simply toggles between display none and block.

How can I possible fix this though?

Thanks.

Upvotes: 1

Views: 1510

Answers (1)

Matt
Matt

Reputation: 44058

In AccordionItem.vue, since you are not using CSS for your transitions, you need to accept a callback from Vue and have Velocity inform it when the transition is complete.

Simply:

leave(e, done) {
  Velocity(e, 'slideUp', { duration: 250, complete: done });
}

You can see it working here

This section of the Vue docs explains:

When using JavaScript-only transitions, the done callbacks are required for the enter and leave hooks. Otherwise, they will be called synchronously and the transition will finish immediately.

Upvotes: 3

Related Questions