Animations

https://github.com/oanstein/VueJS-Complete-Guide-Code/tree/master/14_animations_and_transitions/animations

---

Example: Animation with Animate.css

Note, install: https://yarnpkg.com/en/package/animate.css

/animations/src/App.vue#L38

<transition enter-active-class="animated bounce"
            leave-active-class="animated shake">
  <div class="notification is-danger"
       v-if="show">
    This will bounce if "show"
  </div>
</transition>

---

Example: Transitions on Initial Render

Source/Documentation: https://vuejs.org/v2/guide/transitions.html#Transitions-on-Initial-Render

If you also want to apply a transition on the initial render of a node, you can add the appear attribute:

<transition appear>
  <!-- ... -->
</transition>

By default, this will use the transitions specified for entering and leaving. If you’d like however, you can also specify custom CSS classes:

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class" (2.1.8+)
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

and custom JavaScript hooks:

<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>