Obtenga animaciones y transiciones VUE en minutos (incluidos ejemplos de animación)

¡Hola! Aquí está la pequeña M. (estudiando mucho la versión VUE)

Hoy compartiré con ustedes la animación y la transición en Vue.

Las animaciones y las transiciones son dos conceptos diferentes, pero pueden lograr la misma animación o usarse en combinación.

1. Uso básico

Echemos un vistazo a la documentación oficial de VUE

Vue transitionproporciona componentes encapsulados para agregar transiciones de entrada/salida a cualquier elemento y componente en los siguientes casos

• Representación condicional (uso v-if)
• Visualización condicional (uso v-show)
• componentes dinámicos
• nodo raíz del componente

El siguiente ejemplo usa v-show

Al igual que la etiqueta de plantilla, la etiqueta de transición en realidad no aparecerá en el árbol DOM, pero colocar las etiquetas que necesitan transición evitará muchos problemas innecesarios.

En la transición de entrada/salida, habrá 6 cambios de clase.

1. v-enter: Define el estado de inicio de la transición a. Surte efecto antes de que se inserte el elemento y se elimina el siguiente fotograma después de que se inserte el elemento.
2. v-enter-active: Define el estado cuando la transición de entrada tiene efecto. Se aplica a lo largo de la transición de entrada, surte efecto antes de que se inserte el elemento y se elimina una vez completada la transición/animación. Esta clase se puede utilizar para definir tiempos de proceso de transición de entrada, retrasos y funciones de curva.
3. v-enter-to: Ingrese el estado final de la transición como se define en la versión 2.1.8 y superior . Tiene efecto en el siguiente cuadro después de que se inserta el elemento (y se elimina al mismo v-entertiempo ), se elimina después de que se completa la transición/animación.
4. v-leave: Define el estado inicial de la transición de salida. Entra en vigor inmediatamente cuando se activa la transición de abandono y se elimina en el siguiente fotograma.
5. v-leave-active: Define el estado cuando la transición de salida tiene efecto. Se aplica durante toda la fase de transición de salida, surte efecto inmediatamente cuando se activa la transición de salida y se elimina una vez que se completa la transición/animación. Esta clase se puede utilizar para definir tiempos de proceso, retrasos y funciones de curva para dejar transiciones.
6. v-leave-to: La versión 2.1.8 y superior define el estado final de la transición de salida. Tiene efecto en el siguiente cuadro después de que se activa la transición de salida (y v-leavese ), se elimina después de que se completa la transición/animación.

e ilustraciones oficiales

Si ha comprendido la esencia, entonces felicidades, puede hacer clic en la X en la esquina superior derecha o pasar al siguiente artículo.

↓↓↓ Pero todavía estás en la niebla, felicitaciones, puedes continuar leyendo el siguiente contenido para comprender el significado específico de la imagen de arriba ↓↓↓

2. Animación

La animación en css es una combinación de animación y @keyframes, que debe escribirse en VUE, pero la diferencia es que se especificará el nombre de la clase en VUE, y VUE llamará al efecto de animación adecuado en el momento adecuado.

bibi no es nada, ver GIF

El código anterior (mire los comentarios en el código para comprender el significado de la animación):

El atributo de nombre se agrega a la transición para distinguir varios estilos de animación; si la transición no tiene un atributo de nombre, el nombre de clase predeterminado es .v

Use el verdadero / falso de moveBox para VUE para determinar si mostrar el div

<button @click="moveBox = !moveBox">showBox</button>
      <transition name="move">
        <div class="moveBox" v-show="moveBox">这里是小M，现在是动画</div>
      </transition>
复制代码

export default {
  name: "School",
  data() {
    return {
      moveBox: true,
    };
  },
};
复制代码

<style scoped>
/* 进场动画 .transition的name-enter（进入）-active */
.move-enter-active {
  animation: move 1s linear;
}
/* 出场动画 .transition的name-leave（离开）-active*/
.move-leave-active {
  animation: move 1s reverse;
}
@keyframes move {
  from {
      /*通过位移，让box消失在最左边 */
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
​
.moveBox {
  width: 200px;
  height: 50px;
  background-color: antiquewhite;
  padding: 10px;
}
​
</style>
复制代码

3. Transición

GIF:

Código:

Si no combina .v-enter-active y .v-leave-active, debe agregar un estilo de transición a la etiqueta

Use el verdadero / falso de moveBox2 para VUE para determinar si mostrar el div

 <button @click="moveBox2 = !moveBox2">showBox</button>
      <transition name="move2">
        <div class="moveBox" v-show="moveBox2" style="transition: 1s linear">
          这里是小M，现在是过渡
        </div>
      </transition>
复制代码

export default {
  name: "School",
  data() {
    return {
      moveBox2: true,
    };
  },
};
复制代码

<style scoped>
/* 进入的起点和离开的终点 样式相同 */
.move2-enter,
.move2-leave-to {
  transform: translateX(-100%);
}
/* 离开的起点和进入的终点 样式相同 */
.move2-enter-to,
.move2-leave {
  transform: translateX(0);
}
​
.moveBox {
  width: 200px;
  height: 50px;
  background-color: antiquewhite;
  padding: 10px;
}
​
</style>
复制代码

Dibujé una imagen superficial para que todos entendieran los 4 nombres de clase anteriores:

Biblioteca de terceros 4.animate.css

sitio web oficial de animate.css

Instalar a través de npm, npm install animate.css

Instalar a través de yarn, yarn add animate.css

Una vez completada la instalación, impórtelo, importe 'animate.css'

El lado derecho es su nombre de clase, que se puede copiar directamente

Al usar, debe agregar estos tres atributos a la etiqueta de transición:

 name="animate__animated animate__bounce"
 enter-active-class="animate__rubberBand"
 leave-active-class="animate__swing"
复制代码

Como el nombre sugiere,

• El primero es un nombre fijo.
• El segundo nombre de la clase de animación de enfoque.
• El nombre de la clase de animación de la tercera aparición.

Simplemente seleccione el nombre de la clase que desee, cópielo y listo~

GIF:

Código:

<button @click="animateBox = !animateBox">showBox</button>
      <transition
        name="animate__animated animate__bounce"
        enter-active-class="animate__rubberBand"
        leave-active-class="animate__swing"
      >
        <div class="moveBox" v-show="animateBox">
          这里是小M，现在是Animate.css
        </div>
      </transition>
复制代码

import "animate.css";
export default {
  name: "School",
  data() {
    return {
      animateBox: true,
    };
  },
};
复制代码

<style scoped>
.moveBox {
  width: 200px;
  height: 50px;
  background-color: antiquewhite;
  padding: 10px;
}
​
</style>
复制代码

El intercambio de hoy está aquí. Si quieres el código completo, puedes contactarme en el área de comentarios o mensaje privado.