El uso de la animación vue

vue de transición tendrá su propia animación, consulte el sitio web oficial: https://cn.vuejs.org/v2/guide/transitions.html

1.transition

<Transition> </ transición> elementos de transición etiqueta se envuelve interiores o componentes

Condiciones: 1 deben ser un componente dinámico, v-show / v-si

　　　　2.transition paquete raíz montaje,

Ofertas Nombre de seis clases en transición, los efectos de animación de transición

v-entrar en el estado de la animación de inicio
V-enter-activo proceso de entrar
v-enter-a entrar en el estado final de la animación
V-dejar izquierda para iniciar el proceso de animación
V-dejar-activo proceso de dejar la animación
Después de que el estado de v-dejar-a la licencia

Por encima del nombre de la clase con las transiciones CSS3 o animaciones para completar.

En el que, si la transición llamado nombre de la etiqueta, tal como el nombre = 'fade', el nombre de clase es reemplazado con el descrito anteriormente fundido de entrar,

        / * 入场前状态* / 
        .fade -Introduzca, .fade-dejar- a { 
            opacidad: 0 ; 
        } 
        / * 过渡* / 
        .fade -Introduzca-activo, .fade-dejar- activa { 
            transición: opacidad 0 .5s; 
        } 
        / * 动画* / 
        .ant -enter- activa { 
            animación: rebote - en 0 .5s; 
        } 
        .Ant -leave- activa { 
            animación: rebote - en 0  .5s inversa
        } 
        @Keyframes rebote - en {
             0% { 
                transformar: la escala ( 0 ); 
            }
             50% { 
                transformar: escala ( 1,5 ); 
            }
             100% { 
                transformar: la escala ( 1 ); 
            } 
        }
     </ Style> 
</ head> 
<body> 
    <div id = "aplicación"> 
        <botón @ clic = "cambiar">切换botón </> 
        <nombre de la transición = "fade"> 
            <div v-show =" mostrar "> ¡Hola mundo </ div>
        <nombre de la transición = "hormiga"> 
            <div v-show = "espectáculo"> css动画</ div> 
        </ transición> 
    </ div> 
    <script> var app = nueva Vue ({ 
            EL: '#app' , 
            los datos : la función () {
                 retorno { 
                    espectáculo: verdadero 
                } 
            }, 
            métodos: { 
                palanca () { esto ! .show = esta .show 
                } 
            } 
        }) </ script> 
</ Body>

lista transición 2.transitionGroup

Y la diferencia transitionGroup transición es que si hay varios componentes que, en la transición no se puede utilizar, necesidad transitionGroup

    <style> 
        .list - item { 
            display: inline - bloque; 
            Margen - derecha: 10px; 
        } 
        .List -Introduzca-activo, .list-dejar- activa { 
            transición: todos los 1s; 
        } 
        .List -Introduzca, .list-dejar- a { 
            opacidad: 0 ; 
            transform: translateY (30px) 
        }
     </ style> 
</ head> 
<body> 
    <div id = "aplicación"> 
        <botón @ clic = "add"> Añadir </ button> 
        <botón @ clic = "remove"> Eliminar < 
        Nombre <transition-group = "lista"
            <span v- para = "artículo disponible artículos": clave = clase "elemento" = "list-item"> 
                {{elemento}}
             </ span> 
        </ transición de grupo> 
    </ div>   
    <script> var aplicación = nuevo Vue ({ 
            EL: "#app" , 
            datos: función () {
                 retorno { 
                    artículos: [ 1,2,3,4,5,6,7,8,9 ], 
                    nextNum: 10 
                } 
            }, 
            métodos:{ 
                RandomIndex () { volver Math.floor (Math.random () *
        
                     este .items.length) 
                }, 
                añadir () { 
                    este .items.splice ( este .randomIndex (), 0, este .nextNum ++ ) 
                }, 
                remove () { 
                    este .items.splice ( este .randomIndex (), 1 ) 
                } 
            }, 
        })
     </ script> 
</ body>

3.js función de enlace

Javascript gancho en transición puede declarar propiedades usando js lograr animación

antes-ENTER (el) {} antes del inicio de la animación, establecer el estado inicial
ENTER (EL, hecho) {} Animate
después de entrar (el) {} final de la animación, la limpieza
enter-cancelado (el) {} cancelar la película
antes-licencia (el) {}
dejar (el, hecho) {}
después de la licencia (el) {}
licencia cancelada (el) {}

Cuando, el representa la transición por debajo del conjunto, hecho al final es una función de devolución de llamada, que representan la transición es completa. Caso de abajo muestra el efecto de hacer.

  <style> 
    .fade -Introduzca-activo, .fade-dejar- activa { 
      transición: opacidad 0 .5s; 
    }
   </ Style> 
</ head> 

<body> 
  <div id = "aplicación"> 
    <botón de clic @ = "cambiar"> Panel </ button> 
    <nombre de la transición = "fade"  
      @before -Introduzca = "beforeEnter" 
      @ enter = "entrar" 
      @before -leave = "beforeLeave" 
      @leave = "permiso"> 
      <div v-show = "espectáculo"> 
        Hello World ! 
      </ div> 
    </ transición>
    VUE ({ 
      EL: '#app' , 
      de datos: la función () {
         retorno { 
          Mostrar: true 
        } 
      }, 
      Métodos: { 
        Toggle () { 
          el presente = El .Show! El este del .Show; 
        }, 
        // antes de entrar, la animación estado inicial 
        beforeEnter (eL) { 
          el.style.opacity = 0 ; 
        }, 
        // fin del estado de animación 
        Intro (eL, HECHO) { 
          el.style.opacity = 1. ;
           // escuchando final de los eventos de animación, hecha a cabo, si no hay un detector de eventos finales lo anterior no se muestran correctamente oculta, pero siempre ocupan el módulo de posición div
          el.addEventListener ( 'transitionend' , HECHO) 
        }, 
        // antes de salir del estado 
        beforeLeave (EL) { 
          el.style.opacity = 1. ; 
        }, 
        // después de salir del estado 
        Dejar (EL, HECHO) { 
          el.style.opacity = 0 ; 
          el.addEventListener ( 'transitionend' , HECHO) 
        } 
      }, 
    })

   </ script> 
</ body>

4. La introducción de la animación animate.css

La animación final es relativamente simple de lograr efectos de animación directamente mediante la introducción de animate.css,

enter-clase activo: animación en el proceso de animación
-dejar-clase activa: Animación dejar el proceso de animación

animate.css web oficial: http://www.jq22.com/yanshi819

    <! -引入CSS动画库-> 
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text / css"> 
< / head> 
<body> 
    <div id = "aplicación"> 
        <botón de clic @ = "cambiar"> Panel </ button> 
        <transición entrar activo de clase = "animada bounceInLeft" 
            dejar de clase -active = "animada bounceOutLeft" > 
            <div v-show = "espectáculo"> mundo hellow </ div> 
        </ transición> 
    </ div> 
    <script> var aplicación = nueva Vue ({ 
            EL: '#app' ,
            datos () { retorno { 
                    espectáculo: falsa
        
                
                } 
            }, 
            Métodos: { 
                fiadores () { 
                    este .Show =! este .show 
                } 
            }, 
        })
     </ script> 
</ body>