Breve introducción y aplicación del componente integrado vue3 Transición

prefacio

Vue proporciona dos componentes integrados que lo ayudan a realizar transiciones y animaciones basadas en cambios de estado:

• <Transición> aplica animación cuando un elemento o componente entra y sale del DOM. En este capítulo se describe cómo usarlo.
• <TransitionGroup> aplica animaciones cuando se insertan, mueven o eliminan elementos o componentes en una lista v-for.

Podemos usar estos dos componentes, combinados con css y js, para realizar rápidamente efectos de transición y animación simples y prácticos, y se presentarán a continuación.

Componente de transición

introducir

<Transition> es un componente integrado, lo que significa que se puede usar en cualquier otro componente sin registrarse . ** Puede aplicar animaciones de entrada y salida a elementos o componentes que se le pasan a través de ranuras predeterminadas. ** La entrada o salida puede ser provocada por una de las siguientes condiciones:

• Interruptor activado por v-if
• Interruptor activado por v-show
• Componentes dinámicos alternados por el elemento especial <componente>
  Nota: <Transición> solo admite un solo elemento o componente como su contenido de ranura. Si el contenido es un componente, el componente debe tener solo un elemento raíz.

Proceso de acción

Cuando se insertan o eliminan elementos en un componente <Transition>, sucede lo siguiente:

1. Vue detectará automáticamente si se aplica una transición o animación CSS al elemento de destino. Si es así, algunas clases de transición de CSS se agregan y eliminan en el momento adecuado.
2. Si hay enlaces de JavaScript como oyentes, estas funciones de enlace se llamarán en el momento adecuado.
3. Si no se detectan transiciones o animaciones de CSS, y no se proporcionan ganchos de JavaScript, las inserciones y eliminaciones de DOM se realizarán después del siguiente cuadro de animación del navegador.

combinado con css

Vue define 6 clases que se aplican a los efectos de transición de entrada y salida de elementos.

1. v-enter-from: Introduce el estado inicial de la animación . Agregado antes de la inserción del elemento, eliminado en el siguiente cuadro después de que se completa la inserción del elemento.

2. v-enter-active: Introduce el estado activo de la animación . Se aplica a toda la fase de animación de entrada. Se agrega antes de que se inserte el elemento y se elimina después de que se completa la transición o la animación. Esta clase se puede utilizar para definir la duración, el retraso y el tipo de curva de velocidad de la animación entrante.

3. v-enter-to: Introduce el estado final de la animación . Se agregó el siguiente cuadro después de completar la inserción del elemento (es decir, al mismo tiempo que se elimina v-enter-from) y se elimina después de que se completan las transiciones o animaciones.

4. v-leave-from: Deja el estado inicial de la animación . Se agrega inmediatamente cuando se activa la transición de salida, se elimina un cuadro después.

5. v-leave-active: El estado activo de la animación de salida . Se aplica a toda la fase de animación de salida. Se agrega inmediatamente cuando se activa la transición de salida y se elimina una vez que se completa la transición o la animación. Esta clase se puede utilizar para definir la duración, el retraso y el tipo de curva de velocidad de la animación de salida.

6. v-leave-to: El estado final de la animación de salida . Se agregó el siguiente cuadro después de que se activa una animación de salida (es decir, al mismo tiempo que se elimina v-leave-from), y se elimina después de que se completa la transición o la animación.

El componente <Transition> pasa un nombre prop para declarar un nombre de efecto de transición, por ejemplo: <Transition name="fade">; luego, la v en el nombre de la clase anterior debe reemplazarse con un nombre prop, por ejemplo: fade- dejar

Nombre de clase personalizado

También puede pasar los siguientes accesorios para especificar una clase de transición personalizada:

• entrar desde la clase
• entrar-clase-activa
• entrar a clase
• salir de clase
• dejar-clase-activa
• dejar a clase
  Las clases que pase anularán los nombres de clase predeterminados para la fase correspondiente. Esta característica es muy útil cuando desea integrar otras bibliotecas de animación CSS de terceros bajo el mecanismo de animación de Vue.

<!-- 假设你已经在页面中引入了 Animate.css -->
<Transition
  name="custom-classes"
  enter-active-class="animate__animated animate__tada"
  leave-active-class="animate__animated animate__bounceOutRight"
>
  <p v-if="show">hello</p>
</Transition>

Use la función css tansition and animation y js hook al mismo tiempo

Al usar la transición y animación de css y la función de gancho js al mismo tiempo, es necesario especificar explícitamente el tipo de monitoreo de la función de gancho js. El valor pasado es animación o transición:

<Transition type="animation">...</Transition>

ejemplo

<template>
  <div class="container">
    <h1>过渡效果- 内置组件Transition</h1>
    <div class="example-one">
      <button @click="show = !show">Toggle</button>

      <Transition>
        <p v-show="show">hello</p>
      </Transition>
    </div>
    <div class="example-two">
      <button @click="show2 = !show2">Toggle2</button>

      <Transition name="bounce">
        <p v-if="show2" style="text-align: center">
          Hello here is some bouncy text!
        </p>
      </Transition>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
    
     reactive, toRefs, onBeforeMount, onMounted, ref } from "vue";

const show = ref(true);
const show2 = ref(true);
show2.value = false;
</script>
<style lang="scss" scoped>
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
    
    
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    
    
  opacity: 0;
}

// 示例2
.bounce-enter-active {
    
    
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
    
    
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
    
    
  0% {
    
    
    transform: scale(0);
  }
  50% {
    
    
    transform: scale(1.25);
  }
  100% {
    
    
    transform: scale(1);
  }
}
</style>

combinado con js

Enganche la función durante el proceso de transición al escuchar el evento del componente <Transition>:

• before-enter : Llamado antes de que el elemento se inserte en el DOM. Use esto para establecer el estado "entrar desde" de un elemento
• enter : llama al siguiente cuadro después de que el elemento se inserta en el DOM. Use esto para iniciar la animación.
• after-enter y enter-cancelled : se llama cuando se completa la transición de entrada.
• before-leave : Llamado antes del gancho de salida. La mayoría de las veces, solo debe usar el gancho de salida.
• dejar : Se llama cuando comienza la transición de dejar. Use esto para iniciar la animación de salida.
• after-leave : se llama cuando se completa la transición de abandono y el elemento se ha eliminado del DOM.
• Leave-cancelled : Disponible solo en transiciones v-show.

Estos ganchos se pueden usar junto con transiciones o animaciones CSS, o solos. Cuando se usan animaciones realizadas solo por JavaScript, es mejor agregar un accesorio :css="false". Esto le dice explícitamente a Vue que se puede omitir la detección automática de transiciones CSS. Además de un rendimiento ligeramente mejor, también evita que las reglas CSS interfieran accidentalmente con los efectos de transición.

<template>
  <div class="container">
    <h1>过渡效果- 内置组件Transition</h1>
    <div class="example-one">
      <button @click="show = !show">Toggle</button>

      <Transition>
        <p v-show="show">hello</p>
      </Transition>
    </div>
    <div class="example-two">
      <button @click="show2 = !show2">Toggle2</button>

      <Transition name="bounce" appear>
        <p v-if="show2" style="text-align: center">
          Hello here is some bouncy text!
        </p>
      </Transition>
    </div>
    <h2>js</h2>
    <div>
      <Transition
        appear
        @before-enter="onBeforeEnter"
        @enter="onEnter"
        @after-enter="onAfterEnter"
        @enter-cancelled="onEnterCancelled"
        @before-leave="onBeforeLeave"
        @leave="onLeave"
        @after-leave="onAfterLeave"
        @leave-cancelled="onLeaveCancelled"
      >
        <div v-show="show2">这是一个box</div>
      </Transition>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
    
     reactive, toRefs, onBeforeMount, onMounted, ref } from "vue";

const show = ref(true);
const show2 = ref(true);

// 在元素被插入到 DOM 之前被调用
// 用这个来设置元素的 "enter-from" 状态
function onBeforeEnter(el: Element) {
    
    
  console.log("在元素被插入到 DOM 之前被调用", el);
}

// 在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
function onEnter(el: Element, done: any) {
    
    
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  console.log("在元素被插入到 DOM 之后的下一帧被调用", el);

  done();
}

// 当进入过渡完成时调用。
function onAfterEnter(el: Element) {
    
    
  console.log("进入过渡完成 --- onAfterEnter");
}
function onEnterCancelled(el: Element) {
    
    
  console.log("进入过渡完成 --- onEnterCancelled");
}

// 在 leave 钩子之前调用
// 大多数时候，你应该只会用到 leave 钩子
function onBeforeLeave(el: Element) {
    
    
  console.log("在 leave 钩子之前调用");
}

// 在离开过渡开始时调用
// 用这个来开始离开动画
function onLeave(el: Element, done: any) {
    
    
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  console.log("在离开过渡开始时调用", el);

  done();
}

// 在离开过渡完成、
// 且元素已从 DOM 中移除时调用
function onAfterLeave(el: Element) {
    
    
  console.log("在离开过渡完成、且元素已从 DOM 中移除时调用  --- onAfterLeave");
}

// 仅在 v-show 过渡中可用
function onLeaveCancelled(el: Element) {
    
    
  console.log(
    "在离开过渡完成、且元素已从 DOM 中移除时调用 仅在 v-show 过渡中可用  --- onLeaveCancelled"
  );
}
</script>
<style lang="scss" scoped>
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
    
    
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    
    
  opacity: 0;
}

// 示例2
.bounce-enter-active {
    
    
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
    
    
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
    
    
  0% {
    
    
    transform: scale(0);
  }
  50% {
    
    
    transform: scale(1.25);
  }
  100% {
    
    
    transform: scale(1);
  }
}
</style>

Combinado con vue-router

La transición se puede usar para lograr efectos de transición cuando se usa vue-router. Sin embargo, debe tenerse en cuenta que el componente que implementa el efecto de transición solo puede tener un elemento raíz; de lo contrario, se informará una advertencia.

ejemplo

<script setup lang="ts"></script>

<template>
  <div id="App">
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<style lang="scss" scoped>
.fade-enter-active {
    
    
  transition: all 1s ease-out;
}
.fade-leave-active {
    
    
  transition: all 1s ease-out;
}
.fade-enter-from,
.fade-leave-to {
    
    
  transform: translateX(20px);
  opacity: 0;
}
</style>

Componente otras propiedades

transición de renderizado inicial

Si desea aplicar un efecto de transición cuando se renderiza un nodo por primera vez, puede agregar el accesorio de aparición:

<Transition appear>
  ...
</Transition>

Múltiples elementos secundarios usan la transición v-else-if

Además de cambiar un elemento a través de v-if / v-show, también podemos cambiar entre varios componentes a través de v-if / v-else / v-else-if, solo asegúrese de que solo se represente un elemento a la vez. Puede:

<Transition>
  <button v-if="docState === 'saved'">Edit</button>
  <button v-else-if="docState === 'edited'">Save</button>
  <button v-else-if="docState === 'editing'">Cancel</button>
</Transition>

modo de transición

El atributo mode puede especificar el orden en que se comportan los componentes cuando están animados. Cuando el valor de modo es "out-in", significa que la animación de salida se ejecuta primero y luego se ejecuta la animación de entrada. Un valor de modo de "entrada-salida" es lo contrario.

<Transition mode="out-in">
  ...
</Transition>

Componente TransitionGroup

<TransitionGroup> es un componente integrado que se utiliza para animar la inserción, eliminación y cambio de orden de elementos o componentes en una lista v-for.

La diferencia con <Transición>

<TransitionGroup> admite básicamente los mismos accesorios, clase de transición CSS y escucha de enlace de JavaScript que <Transition>, pero existen las siguientes diferencias:

• De forma predeterminada, no representará un elemento contenedor. Pero puede especificar un elemento para que se represente como un elemento contenedor pasando la etiqueta prop.

• El modo de transición no está disponible aquí porque ya no cambiamos entre elementos mutuamente excluyentes.

• Cada elemento de la lista debe tener un atributo clave único.

• Las clases de transición CSS se aplican a los elementos dentro de la lista, no a los elementos contenedores.

animación en movimiento

Puede agregar la clase list-move para lograr un efecto de movimiento suave. Para asegurarse de que el elemento que se va a dejar se elimine del diseño, puede cambiar manualmente el método de diseño para eliminarlo cuando la lista esté activa.

.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
    
    
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
    
    
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
    
    
  position: absolute;
}

ejemplo

<template>
  <div class="container">
    <h1>TransitionGroup</h1>
    <a-input v-model:value="inputValue" placeholder="请输入" />
    <a-button @click="add">添加</a-button>
    <a-button @click="del">随机删除</a-button>
    <a-button @click="emptyHandler">置空</a-button>
    <TransitionGroup name="list" tag="ul">
      <li v-for="item in items" :key="item">
        {
    
    {
    
     item }}
      </li>
    </TransitionGroup>
  </div>
</template>
<script lang="ts" setup>
import {
    
     reactive, ref, toRefs, onBeforeMount, onMounted } from "vue";
const items = reactive<Array<number | string>>([1, 2, 3]);
const inputValue = ref("123");

//  add
const add = () => {
    
    
  console.log(inputValue, inputValue.value);

  if (inputValue.value !== "") {
    
    
    items.push(inputValue.value);
    inputValue.value = "";
  }
};

// del
const del = () => {
    
    
  let randomNum = Math.floor(Math.random() * (items.length - 1));
  items.splice(randomNum, 1);
};

//  emptyHandler
const emptyHandler = () => {
    
    
  items.splice(0);
};
</script>
<style lang="scss" scoped>
.list-move,
.list-enter-active,
.list-leave-active {
    
    
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
    
    
  opacity: 0;
  transform: translateX(10px);
}
/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
    
    
  position: absolute;
}
</style>

epílogo

se acabó. El estado de transición generalmente se usa cuando cambia el nivel del módulo de la página, como los efectos de transición de enrutamiento; el estado de transición de vue está diseñado para elementos. Las transiciones de lista se pueden usar cuando los datos cambian en tiempo real.