Transition leave-active-class not working

[simonerlandsen]

Expected Behavior

Expected animation to fire before removing line-chart

Actual Behavior

line-chart goes blank for as long as the animation should have lasted then gets removed

codepen

https://codepen.io/anon/pen/zzOXjm

notes

• enter-active-class works as expected.
• If you replace the line-chart content with just a template with a paragraph inside, it works as expected.

[apertureless]

Hi @emilz0r ,

well it is actually as expected if you think about it. What v-if does, is a real conditional rendering. Which means, that components get destroyed if the condition is not met. Read more about it here: https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

So, you click your slide button which sets the condition to true. The chart get's created and mounted and because of the transition animated.

If you click it again, the v-if direction is set to false and destroys your component. Which means the chart gets destroyed because of it's beforeDestroy hook, where the chartjs instance get cleared. And then your transition animates the div.

You can however use v-show in your case. This will work out for you, because then the component does not get destroyed. ✌️

[simonerlandsen]

@apertureless Huh, I thought that I'd checked v-show, but it works:)

What's a little strange is that it works with v-if if there is no chart in the component, and also with the chart you can see the scrollbar slowly get smaller before it disappears.

Well it works with v-show, so thanks a bunch!

[apertureless]

Well not strange at all. If you put a component in a v-if it will get destroyed properly. The problem with that is, that your component gets destroyed before the transition finishes.

[simonerlandsen]

I updated the codepen ( https://codepen.io/anon/pen/zzOXjm ) to not extend the chart, and now the animation runs before destroying the component. Should it still get destroyed before the transition finishes with this setup also, by your definition?

[simonerlandsen]

Is it because the chart is rendered on mount with the chart, and not by the template definition?

[simonerlandsen]

I thought that the transition component sniffed for css transitions, and then waited for the amount of time that the css transition is set to take before destroying.

https://vuejs.org/v2/guide/transitions.html

[apertureless]

It is a bit tricky, tho because Chart.js is not "native" Vue. It is a third party lib, which works on the canvas and has it's own lifecycle.

If you add the beforeDestroy() and destroyed() hooks to your component in your pen, you will see that the beforeDestroy() hook is called instantly if you click on the button. And in the base charts which you extend the chartjs instance get destroyed in the beforeDestroy hook. And if you destroy the chart instance, the chart disappears.

Which is important, otherwise you could have multiple instances of the chartjs instance, which led to bugs and unwanted behavior.

[simonerlandsen]

I see. Thanks for your replies, and thanks for making this great repo:)