Blog Rubynetti

CSS list transition with Vue.js

In Vue there are transition and animation.

Transition are about elements that enter or go out.
Animation are a more generic concept.

Transitions

In Vue transitions there are a special / magic tag that are triggered by:

  • Conditional rendering (using v-if)
  • Conditional display (using v-show)
  • Dynamic components
  • Component root nodes

Example of use:

hello

Vue transition decide to apply css class in a dynamic way.
The classes that vue decide to apply are six:

  • v-enter
  • v-enter-to
  • v-leave
  • v-leave-to

Animation

Animation use same magic tag () but there is a behavior very different: 

  •  v-enter is removed at the end of animation (animationend event)

In transition v-enter is removed after first frame.

Chi siamo?

Rubynetti è una squadra di designer, sviluppatori e programmatori specializzata in applicazioni web. Il nostro focus è portare valore e automazione nei processi umani e aziendali attraverso l'uso delle tecnologie del web.

Operiamo da più di 20 anni nel settore e siamo specializzati su Vue.js, Nuxt, Rails e React.

Lavoriamo per lo più da Venezia centro storico.

Contatti

Se hai bisogno di una mano per portare avanti o creare dal nulla un progetto digitale siamo a disposizione.