Introducción

1

Bienvenidos al Curso Profesional de VueJS

2

Introducción a VueJS

CLI y Dev Tools

3

Herramientas y Experiencia de Desarrollo + Archivos .vue

4

CLI - Hello World

5

Webpack

6

Babel

7

Eslint

8

SASS y BULMA

9

PUG

10

Ejercicio de SASS y PUG

11

Ejercicio Avanzado de Pug y SASS

Manipulación del DOM

12

Expresiones

13

Directivas

14

Data Binding

15

Computed properties

16

Watchers

17

Eventos

18

Integración a Platzi Music

19

Ejercicio de Manipulación del DOM

REST y HTTP

20

Servicios

21

Consumir API's REST

22

Fetch API & Trae

Sistema de Componentes

23

Component

24

Creación de componentes

25

Reactividad

26

Ciclo de vida

27

Comunicación entre componentes padres e hijos

28

Comunicación de hijos hacia padres

29

Utilización de Slots

30

Comunicacion entre Componentes Genericos - Event Bus y Plugins

Vue Router

31

Introducción a Vue Router

32

Instalar vue-router y configurar router view

33

Crear y Navegar Rutas con router-link

Extendiendo VueJS

34

Modifiers

35

Filtros

36

Directivas Personalizadas

37

Mixins

Clases, Animaciones y Transiciones36

38

Vue Transitions y Animaciones de CSS

Vuex

39

Estado Centralizado, Flux y Vuex

40

State

41

Mutations

42

Getters

43

Actions

44

Integración a Platzi Music

Nuxt.js

45

Server Side Rendering

46

Nuxt.js

47

Conceptos Básicos de Nuxt

Deploy a Producción con Now

48

Qué es now

49

Configuración de now y deploy

Conclusiones

50

Cierre del curso

Bonus

51

Internacionalización con vue-i18n

52

Unit Test Karma - Mocha & Webpack

53

Implementación de Autenticación de Usuarios en Vue usando JWT

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Vue Transitions y Animaciones de CSS

38/53
Recursos

Aportes 10

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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"
              )

👌