Section 14: Animation & Transitions

Understanding Transitions & Animations
Animating with Vue
Animating Lists

 

With this,

We can simply reverse the effect for the opposite case.

so here we can say that which animation effect should occur first.

one of the transition's attribute

also we have '@before-leave'.

 

we can get  some arguments too

if we have non-css based animation, then Vue would not know when the appropriate timing is for some animation.

In this case, we can use 'done' to tell Vue when the timing is.

Then the next animation will start when the current animation is really done

 

if you don't use any CSS for this animation, then you can simply put :css="false" then it can improve the performance a bit.

 

An Important Note on Animated Route Changes

When animating route changes as shown in the previous lecture, there's one important thing you have to keep in mind:

Your route components must NOT have multiple root elements!

For example, if your route component looked like this:

<template>
  <section>
    <h2>Section 1</h2>
  </section>
  <section>
    <h2>Section 2</h2>
  </section>
</template>

The <transition> component would not be able to animate route changes and you would get a warning in the JS console in your browser dev tools.

Why?

Because you must not forget that <transition> needs exactly one child element (with the special exceptions you learned about in this module).

If your route component has multiple root elements, <transition> in the end has multiple children and that is the problem.

Hence, if you want to transition between routes, you need to ensure that your route components have exactly one root element - for example:

<template>
  <div>
    <section>
      <h2>Section 1</h2>
    </section>
    <section>
      <h2>Section 2</h2>
    </section>
  </div>
</template>