Animación Vue (transición)

Language 2023-07-26 02:24:28 views: null

1. Principio de implementación

Al insertar, actualizar y eliminar DOMelementos, agregue un nombre de clase de estilo al elemento en el momento apropiado y CSSutilícelo con el estilo para lograr efectos de animación.

En términos sencillos, es envolver el elemento que se va a animar DOMcon transitionuna etiqueta. Antes, durante y después del movimiento de este elemento html, vuese agregarán DOMdiferentes elementos classy luego se combinarán con CSSel estilo para lograr efectos de animación.

Ejemplo:

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <!-- Vue 的内置动画标签 transition -->
    <transition>
      <!-- 只能包含 1 个元素 -->
      <h1 v-show="bol">组件动画效果</h1>
      <!-- 需要设置 v-show / v-if 属性控制元素的显示 -->
    </transition>
  </div>
</template>

<script>
export default {
      
      
  name: "TestDemo",
  data() {
      
      
    return {
      
       bol: true };
  },
};
</script>

<style>
/* 进入：始状态 */
.v-enter {
      
      
  transform: translateX(-100%);
  color: red;
}
/* 进入：末状态 */
.v-enter-to {
      
      
  transform: translateX(0);
  color: yellow;
}
/* 进入动画 */
.v-enter-active {
      
      
  transition: 10s;
  color: linear-gradient(red,yellow);;
}

/* 离开：始状态 */
.v-leave {
      
      
  transform: translateX(0);
}
/* 离开：末状态 */
.v-leave-to {
      
      
  transform: translateX(-100%);
}
/* 离开动画 */
.v-leave-active {
      
      
  transition: 1s;
}
</style>

Dos, etiqueta de transición

  • VueLas etiquetas de animación incorporadas:transition
  • transitionUna etiqueta solo puede contener 1 elemento; si se escriben varios elementos dentro, solo el primero tendrá efecto
  • transitionLas etiquetas envueltas requieren configuraciones v-show/ v-ifpropiedades para controlar la visualización del elemento

3. El nombre de la clase correspondiente al estilo CSS de la animación.

  • Ingrese: .v-enterestado inicial, .v-enter-toestado final, .v-enter-activeingrese animación
  • Salir: .v-leaveestado inicial, .v-leave-toestado final, .v-leave-activedejar animación
  • .v-enter, .v-leaveDefina el estado inicial de la animación, en el que puede definir la posición inicial, el color, la fuente, etc.
  • .v-enter-to, define el estado final de la animación, y la definición de estas dos clases debe ser coherente con la clase DOM; de lo contrario, cambiará instantáneamente del estilo de , al estilo de DOM .v-leave-todespués de que finalice la animación (Ejemplo 1, Ejemplo 2).v-enter-to.v-leave-to
  • .v-enter-active, .v-leave-activeDefina las reglas de degradado de la animación, por ejemplo, si es un degradado de posición, definirá el tiempo y la ruta del degradado; si es un degradado de color, definirá las reglas de degradado relacionadas con el color

3.1 Ejemplo 1

se desvanecerá de rojo a amarillo

<template>
    <div>
      <button @click="bol = !bol">隐藏/显示</button>
      <transition>
        <h1 v-show="bol" class="demo">组件动画效果</h1>
      </transition>
    </div>
  </template>
  
  <script>
  export default {
      
      
    name: "TestDemo",
    data() {
      
      
      return {
      
       bol: true };
    },
  };
  </script>
  
  <style>
  .v-enter-active,
  .v-leave-active {
      
      
    transition: 10s !important;
    color: linear-gradient(red,yellow) !important;
  }

  .demo {
      
      
    color: yellow;
  }

  .v-enter,
  .v-leave-to {
      
      
    transform: translateX(-50%);
    color: red;
  }
  </style>

3.2 Ejemplo 2

se desvanecerá de rojo a amarillo y luego instantáneamente a negro

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition>
      <h1 v-show="bol" class="demo">组件动画效果</h1>
    </transition>
  </div>
</template>
  
  <script>
export default {
      
      
  name: "TestDemo",
  data() {
      
      
    return {
      
       bol: true };
  },
};
</script>
<style>
.v-enter,
.v-leave-to {
      
      
  transform: translateX(-50%);
  color: red;
}

.v-enter-to,
.v-leave {
      
      
  transform: translateX(0);
  color: yellow;
}

.v-enter-active,
.v-leave-active {
      
      
  transition: 10s !important;
  color: linear-gradient(red, yellow) !important;
}
</style>

4. Propiedades de la etiqueta de transición

4.1 atributo de nombre

Se utiliza para generar automáticamente nombres de clases de animación CSS

  • Si transitionel elemento de etiqueta no establece nameel atributo, el nombre de la clase de animación correspondiente esv-XXX
  • Si el atributo está establecido name, el nombre de la clase de animación correspondiente es属性值-XXX
  • Cuando hay varias tansitionetiquetas, podemos especificar diferentes efectos de animación namepara cada etiqueta a través del atributotransitionCSS

4.2 atributo de aparición

Mostrar animación en efecto al principio

4.3 atributo de modo

  • in-out: El nuevo elemento hace la transición primero y el elemento actual hace la transición después de completarse
  • out-in: El elemento actual pasa primero y, una vez finalizado, el nuevo elemento pasa a

4.4 Ejemplos

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <!-- Vue 的内置动画标签 transition -->
    <transition name="test" appear>
      <!-- 只能包含 1 个元素 -->
      <h1 v-show="bol">组件动画效果</h1>
      <!-- 需要设置 v-show / v-if 属性控制元素的显示 -->
    </transition>
  </div>
</template>

<script>
export default {
      
      
  name: "TestDemo",
  data() {
      
      
    return {
      
       bol: true };
  },
};
</script>

<style>
.test-enter,
.test-leave-to {
      
      
  transform: translateX(-50%);
  color: red;
}

.test-enter-to,
.test-leave {
      
      
  transform: translateX(0);
  color: yellow;
}

.test-enter-active,
.test-leave-active {
      
      
  transition: 10s !important;
  color: linear-gradient(red,yellow) !important;
}
</style>

Cinco, etiqueta de grupo de transición

  • transitionUna etiqueta solo puede contener 1 elemento y transition-groupuna etiqueta puede contener varios elementos
  • transition-groupLos elementos de la etiqueta deben establecer keyel atributo como el identificador único del elemento actual
  • Aparte de eso, otros usos son transitionlos mismos que las etiquetas.
<template>
  <div id="app">
    <button @click="isEditing = !isEditing">切换</button>
    <transition-group appear>
      <h1 v-if="isEditing" key="save">Save</h1>
      <h1 v-if="!isEditing" key="edit">Edit</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
      
      
  name: "TestDemo",
  data() {
      
      
    return {
      
       isEditing: true };
  },
};
</script>

<style>
h1 {
      
      
  transition: 3s;
  position: absolute;
}
.v-leave {
      
      
  opacity: 1;
}
.v-leave-to {
      
      
  opacity: 0;
}
.v-enter {
      
      
  opacity: 0;
}
.v-enter-to {
      
      
  opacity: 1;
}
</style>

6. Función de enlace de JavaScript

      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled"
  methods: {
    
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    console.log('beforeEnter');
    console.log(el);
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    console.log('enter');
    console.log(el);
    done()
  },
  afterEnter: function (el) {
    console.log('afterEnter');
    console.log(el);
  },
  enterCancelled: function (el) {
    console.log('enterCancelled');
    console.log(el);
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    console.log('beforeLeave');
    console.log(el);
  },
  leave: function (el, done) {
    console.log('leave');
    console.log(el);
    done()
  },
  afterLeave: function (el) {
    console.log('afterLeave');
    console.log(el);
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    console.log('leaveCancelled');
    console.log(el);
  }
  },

Siete, Vue implementa varios métodos de animación.

7.1 transición

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition name="fade">
      <p v-if="bol">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
      
      
  name: "TestDemo",
  data() {
      
      
    return {
      
       bol: true };
  },
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
      
      
  transition: all 3s;
}
.fade-enter,
.fade-leave-to {
      
      
  opacity: 0;
  width: 100px;
}
p {
      
      
  border: 1px solid red;
  width: 300px;
}
</style>

Animación 7.2 + @keyframes

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition name="bounce">
      <p v-show="bol" class="demo">组件动画效果</p>
    </transition>
  </div>
</template>

<script>
export default {
      
      
  name: "TestDemo",
  data() {
      
      
    return {
      
       bol: true };
  },
};
</script>
<style>
.bounce-enter-active {
      
      
  animation: bounce-in 5s;
}
.bounce-leave-active {
      
      
  animation: bounce-in 5s reverse;
}
@keyframes bounce-in {
      
      
  0% {
      
      
    transform: scale(0);
  }
  50% {
      
      
    transform: scale(1.5);
  }
  100% {
      
      
    transform: scale(1);
  }
}
</style>

7.3 animar.css

  1. Instalar:npm install animate.css
  2. Importar la biblioteca de estilos:import "animate.css"
  3. Agregar atributos a la transitionetiqueta especificadanameanimate_animate、animate__bounce
  4. Configure enter-active-classel atributo, especifique la animación de entrada: seleccione un valor de estilo de entrada en la biblioteca de estilos como enter-active-classvalor de atributo
  5. Configure leave-active-classla propiedad para especificar la animación de salida: elija un valor de estilo de salida en la biblioteca de estilos como leave-active-classvalor de propiedad
<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition
      name="animate__animated animate__bounce"
      enter-active-class="animate__bounceIn"
      leave-active-class="animate__bounceOut"
    >
      <p v-show="bol" name="animate_animate">组件动画效果</p>
    </transition>
  </div>
</template>

<script>
import "animate.css";
export default {
      
      
  name: "TestDemo",
  data() {
      
      
    return {
      
       bol: true };
  },
};
</script>

7.4 Ganchos de JavaScript

  1. Al usar solo JavaScripttransiciones, debe usar devoluciones de llamada en entery . De lo contrario, se llaman sincrónicamente y la transición se completa de inmediato.leavedone
  2. Se recomienda que para las adiciones de elementos que solo usan JavaScripttransiciones v-bind:css="false", Vuese omita la detección de CSS. Esto también evita efectos durante la transición CSS.

7.5 Velocidad.js

  1. Instalar:npm install velocity-animate
<template>
  <div id="app">
    <button @click="show = !show">显示/隐藏</button>
    <br />
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false"
    >
      <p v-show="show">hello</p>
    </transition>
  </div>
</template>

<script>
import Velocity from "velocity-animate";

export default {
      
      
  name: "App",
  data: function () {
      
      
    return {
      
      
      show: true,
    };
  },
  methods: {
      
      
    beforeEnter: function (el) {
      
      
      el.style.opacity = 0;
    },
    enter: function (el, done) {
      
      
      Velocity(
        el,
        {
      
      
          rotateZ: "0deg",
          translateY: "0px",
          translateX: "0px",
          opacity: 1,
        },
        {
      
       complete: done }
      );
    },
    leave: function (el, done) {
      
      
      Velocity(
        el,
        {
      
      
          rotateZ: "45deg",
          translateY: "30px",
          translateX: "30px",
          opacity: 0,
        },
        {
      
       complete: done }
      );
    },
  },
};
</script>

7.6 Transiciones entre múltiples elementos

<template>
  <div id="example-2">
    <transition name="fade" mode="out-in">
      <button v-if="isEditing" key="save" @click="isEditing = !isEditing">
        Save
      </button>
      <button v-else key="edit" @click="isEditing = !isEditing">Edit</button>
    </transition>
  </div>
</template>

<script>
export default {
      
      
  name: "TransitionTest",
  data() {
      
      
    return {
      
      
      name: "TransitionTest",
      isEditing: false,
    };
  }
};
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
      
      
  transition: all 1s;
}
.fade-enter {
      
      
  opacity: 0;
  transform: translateX(50px);
}
.fade-leave-to {
      
      
  opacity: 0;
  transform: translateX(-50px);
}

#example-2 {
      
      
  position: relative;
  padding: 100px;
}
#example-2 button {
      
      
  position: absolute;
}
</style>

7.7 Transición de múltiples componentes

<template>
  <div id="transition-components-demo">
    <button @click="view = 'VA'">a</button>
    <button @click="view = 'VB'">b</button>
    <transition name="component-fade" mode="out-in">
      <component v-bind:is="view"></component>
    </transition>
  </div>
</template>

<script>
import VA from "./VA.vue";
import VB from "./VB.vue";

export default {
      
      
  name: "TransitionTest",
  data() {
      
      
    return {
      
      
      view: "VA",
    };
  },
  components: {
      
      
    VA,
    VB,
  },
};
</script>
<style scoped>
.component-fade-enter-active,
.component-fade-leave-active {
      
      
  transition: opacity 2s ease;
}
.component-fade-enter,
.component-fade-leave-to {
      
      
  opacity: 0;
}
</style>

7.8 Cómo animar el bucle for (transición de entrada/salida de la lista)

<template>
  <div id="list-demo" class="demo">
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" :key="item" class="list-item">
        {
   
   { item }}
      </span>
    </transition-group>
  </div>
</template>

<script>
export default {
      
      
  name: "TransitionTest",
  data() {
      
      
    return {
      
      
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      nextNum: 10,
    };
  },
  methods: {
      
      
    randomIndex: function () {
      
      
      return Math.floor(Math.random() * this.items.length);
    },
    add: function () {
      
      
      this.items.splice(this.randomIndex(), 0, this.nextNum++);
    },
    remove: function () {
      
      
      this.items.splice(this.randomIndex(), 1);
    },
  },
};
</script>
<style scoped>
.list-item {
      
      
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
      
      
  transition: all 1s;
}
.list-enter, .list-leave-to {
      
      
  opacity: 0;
  transform: translateY(30px);
}
</style>

referencia

Supongo que te gusta

Origin blog.csdn.net/letianxf/article/details/129030335
Recomendado
Clasificación
Diario
Más
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(33)
2024-04-29(5)

Code World

© 2018 codetd.com