Vue2: use estilos de animación de terceros para lograr una animación excesiva

Sobre animación usando animación de terceros

GitHub: https://www.npmjs.com/package/animate.css

Sitio web oficial: https://github.com/animate-css/animate.css

El primer paso es instalar la biblioteca de estilos.

npm install animate.css

El segundo paso es introducir el estilo y configurar el atributo de nombre de la etiqueta de transición o grupo de transición como animate__animated animate__bounce

name="animate__animated animate__bounce"

El tercer paso es configurar la llamada de atributo de la etiqueta de transición (se recomienda abrir el sitio web oficial para probar el efecto antes de configurar), el ejemplo es el siguiente:

Test.view

<template>
    <div>
      <p>使用第三方动画</p>
     <button @click="isShow=!isShow">test 显示/隐藏</button>
      <transition-group
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__swing"
          leave-active-class="animate__backOutUp"
      >
        <h1 v-show="isShow" key="1">AAA</h1>
        <h1 v-show="isShow" key="2">BBB</h1>
      </transition-group>
    </div>
</template>

<script>
import 'animate.css' //导入第三方动画样式

export default {
  name: "Test",
  data(){
    return {
      isShow:true
    }
  }
}
</script>

<style scoped>
h1{
  background-color: orange;
}

</style>

analizar

<transition-group
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__swing"
          leave-active-class="animate__backOutUp"
      >
        <h1 v-show="isShow" key="1">AAA</h1>
        <h1 v-show="isShow" key="2">BBB</h1>
      </transition-group>

Aplicar animaciones css usando enter-active-class y Leave-active-class

enter-active-class establece el efecto de ingresar al campo, y usa dejar-active-class para establecer el efecto de abandonar el campo

Personalice el nombre de la clase, puede personalizar el nombre de la clase de transición a través de las siguientes características:
ingresar a la clase
ingresar a la clase activa
ingresar a la clase
dejar la clase
dejar la clase activa
dejar a la clase
el nombre personalizado de la clase tiene una prioridad más alta que el nombre de clase común, que es útil para el sistema de transición de Vue y otras bibliotecas de animación CSS de terceros, como Animate.css

Duración de transición explícita (nuevo en 2.2.0)

Por lo general, Vue puede calcular automáticamente el tiempo de finalización del efecto de transición. De forma predeterminada, Vue espera su primer evento de fin de transición o fin de animación en el elemento raíz de la transición.

Si desea personalizar el tiempo, puede personalizar una duración de transición explícita (en milisegundos) con el atributo de duración en el componente:

<transition :duration="1000">...</transition>

La duración de entrada y salida se puede personalizar:

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

---

Transición y animación del paquete Vue

1. Función: al insertar, actualizar o eliminar elementos DOM, agregue un nombre de clase de estilo al elemento en el momento adecuado. Gráfico:

2. Escribiendo:

1. Listo para peinar:

• Los elementos vienen en estilos:

1. v-enter: el punto de partida de entrada

2. v-enter-active: en proceso de ingreso

3. v-enter-to: el punto final de entrada

• Estilos para la salida de elementos:

4. v-leave: el punto de partida de la partida

5. v-leave-active: en proceso de salida

6. v-leave-to: el punto final de partida

2. Use <transition> para envolver los elementos a los que se realizará la transición y configure el atributo de nombre:

<transition name="hello">
    <h1 v-show="isShow">你好啊！</h1>
</transition>

3. Observaciones: si hay varios elementos que deben realizar la transición, debe usar: <transition-group>, y cada elemento debe especificar un valor clave