Vue Transitions y Animaciones de CSS

En vue3 la clase

.move-enter

se cambio por

.move-enter-from

Vue tiene diferentes componente de transition

• El primero es

<transition name="my style name">elemento, componente etc  </>

Este permite que una transicion animada y suave segun lo estilo que le apliquemos en nuestro css.
este

• El segundo metodo mas conocido es list transicion que es perfecto para aplicarlo en elemento anidados o listas, tab es donde se especifica el elemento padre

<transition-group name= "my style name" tab=""> lista de elementos </>

Vue transition permite efecto de entrada/salida como

Parametro de entrada
v-enter, v-enter-active, v-enter-to

Parametro de salida
v-leave, v-leave-active, v-leave-to

mas informacion https://es-vuejs.github.io/vuejs.org/v2/guide/transitions.html

Interesante, por lo que veo esto se puede aplicar a cualquier elemento HTML y permite hacer transiciones de manera más sencillas sin tener que estar bindeando clases xD

Soy feliz como una lombris. Me quedo después de algunos intentos.

Mi template de Search.vue

.container.results
        // .columns.is-multiline
        transition-group(name="fade", tag="div" class="columns is-multiline")
          .column.is-one-quarter(v-for="t in tracks", :key="t.id")
            pm-track(:track="t",
            :class="{ 'is-active': t.id === selectedTrack }",
            v-blur="t.preview_url",
            @select="setSelectedTrack")
      p Todos los derechos reservados

En la sección de metodos del componente Search.vue

methods: {
    search () {
      // console.log(this.searchQuery)
      // this.tracks = tracks
      if (this.searchQuery === '') { return }
      this.isLoading = true
      this.tracks = []
      trackService.search(this.searchQuery)
        .then(res => {
          console.log(res)
          // Si el total de resultados es 0, entonces se establece en true y se mostraria el mensaje de notificacon
          this.showNotification = res.tracks.total === 0
          // Ver en consola el cuerpo del res
          // this.tracks = []
          this.tracks = res.tracks.items
          this.isLoading = false
        })
    },
    setSelectedTrack (id) {
      this.selectedTrack = id
    }
  }

MIs estilos

.fade-enter-active, .fade-leave-active {
	transform: scale(1);
	transition: all .8s linear;
}

.fade-enter, .fade-leave-to {
	transform: scale(0);
}

@import '~bulma/bulma.sass';

.move-enter-active, .move-leave-active {
	transform: translateX(0);
	transition: all 0.3s linear;
}

.move-enter, .move-leave-to {
	transform: translateX(100%);
}

Por fin comprendo el sistema de las transiciones de Vue. ME HACIA BOLAS con todo ello.

Vue ofrece una variedad de maneras para aplicar efectos de transición cuando los elementos son insertados, actualizados o eliminados del DOM. Esto incluye herramientas para:

• aplicar clases para transiciones y animaciones CSS automáticamente
• integrar librerías externas de animación CSS, por ejemplo Animate.css
• usar JavaScript para manipular directamente el DOM durante hooks de transición
• integrar librerías externas de animación por JavaScript, como Velocity.js

El componente transition-group nos permite añadir animaciones a una lista de elementos como por ejemplo con un v-for. Sin embargo debemos tener las siguientes consideraciones:

• Representa un elemento por defecto <span>, pero se puede cambiar por otro elemento con la propiedad tag.
• Los elemento en el interior siempre deben tener un id. Con un v-for podemos incluir la propiedad v-binding:key para que cada elemento posea un id
• Las clases de transición CSS se aplicarán a elementos internos y no al grupo / contenedor en sí.

Aquí mi código

Search.vue

      .container.results
          transition-group(name="move", tag="div", class="columns is-multiline")
            .column.is-one-quarter(v-for="t in tracks", :key="t.id")
              pm-track(
                v-blur="t.preview_url",
                :track="t",
                @select="setSelectedTrack",
                :class="{'is-active' : t.id === selectedTrack}")

Solución:

      .container.results
          transition-group(name="move" tag="div" class="columns is-multiline")
            .column.is-one-quarter(v-for="t in tracks", :key="t.id")
              pm-track(
                v-blur="t.preview_url"
                :class="{ 'is-active': t.id === trackIdSeleted }"
                :track="t",
                @select="setSelectedTrack"
              )

👌