Uso de animação vue

vue em transição terá a sua própria animação, consulte o site oficial: https://cn.vuejs.org/v2/guide/transitions.html

1.transition

<transition> </ transição> elementos de transição etiqueta é enrolada ou componentes internos

Condições: 1 deve ser um componente dinâmico, v-show / v-se

　　　　pacote raiz 2.transition montagem,

Oferece nome de seis classe em transição, os efeitos de animação de transição

v-entrar no estado do início de animação
V-entrar-activo do processo de entrada
v-entrar-a entrar no estado final da animação
v-deixam esquerda para iniciar o processo de animação
V-licença ativo processo para deixar a animação
Após o estado de v-leave-à licença

Acima do nome da classe com transições CSS3 ou animações para ser concluído.

Em que, se a transição chamado nome de marca, como o nome = 'fade', o nome de classe é substituído com o acima descrito de fade-introduzir,

        / * 入场前状态* / 
        .fade -introduza, .fade-deixar- a { 
            opacidade: 0 ; 
        } 
        / * 过渡* / 
        .fade -introduza-activo, .fade-deixar- activo { 
            transição: opacidade 0 .5s; 
        } 
        / * 动画* / 
        .ant -enter- activa { 
            animação: salto - em 0 .5s; 
        } 
        .Ant -leave- activo { 
            animação: salto - em 0 .5s inversa 
        } 
        @Keyframes salto - em {
             0% { 
                transformação: escala ( 0 ); 
            }
             50% { 
                transformar: escala ( 1,5 ); 
            }
             100% { 
                transformar: escala ( 1 ); 
            } 
        }
     </ Style> 
</ head> 
<body> 
    <div id = "app"> 
        <button @ clique = "toggle">切换</ button> 
        <nome da transição = "fade"> 
            <div v-show =" mostrar "> Olá, mundo </ div>
        <nome da transição = "formiga">
            <div v-show = "show"> css动画</ div> 
        </ transition> 
    </ div> 
    <script> var app = new Vue ({ 
            el: '#app' , 
            dados: função () {
                 return { 
                    espectáculo : verdadeiro 
                } 
            }, 
            métodos: { 
                alternância () { isso ! .mostrar = este .mostrar 
                } 
            } 
        }) </ script> 
</ body>

Lista de transição 2.transitionGroup

E diferença transitionGroup transição é que se houver vários componentes que, a transição não pode ser usado, necessidade transitionGroup

    <style> 
        .list - artigo { 
            display: inline - block; 
            margem - direita: 10px; 
        } 
        .List -introduza-activo, .list-deixar- activo { 
            transição: todos os 1s; 
        } 
        .List -Introduza, .list-deixar- para { 
            opacidade: 0 ; 
            transform: translateY (30px) 
        }
     </ style> 
</ head> 
<body> 
    <div id = "app"> 
        <button @ clique = "add"> Adicionar </ button> 
        <button @ clique = "Remover"> Remover <
        <name = "lista" tag = "p" de transição de grupo> 
            <span v- para = "item itens": key = "item" class = "list-item"> 
                {{artigo}}
             </ span> 
        < / transição grupo> 
    </ div>   
    <script> var app = new Vue ({ 
            el: "#app" , 
            dados: função () {
                 return { 
                    itens: [ 1,2,3,4,5,6,7 , 8,9 ], 
                    nextNum: 10 
                } 
            },
            Métodos: { 
                randomIndex () {
        
                    voltar Math.floor (Math.random () *este .items.length) 
                }, 
                add () { 
                    este .items.splice ( este .randomIndex (), 0, neste .nextNum ++ ) 
                }, 
                remove () { 
                    este .items.splice ( este .randomIndex (), 1 ) 
                } 
            }, 
        })
     </ script> 
</ body>

função 3.js gancho

Javascript gancho na transição pode declarar propriedades usando js atingir animação

antes de a introduzir (el) {} antes do início da animação, definir o estado inicial
entrar (el, feito) {} Animate
depois introduzir-(el) {} final da animação, limpeza
enter-cancelada (el) {} cancelar filme
before-licença (el) {}
sair (el, feito) {}
pós-licença (el) {}
cancelada-licença (el) {}

Onde, el representa a transição abaixo da montagem, feito a final é uma função de chamada de retorno, representando a transição está completa. Caso abaixo mostra o efeito de fazer.

  <style> 
    .fade -Introduza-ativo, .fade-deixar- activa { 
      transição: opacidade 0 .5s; 
    }
   </ Style> 
</ head> 

<body> 
  <div id = "app"> 
    <button @ clique = "toggle"> alternância </ button> 
    <nome da transição = "fade"  
      @Before -Introduza = "beforeEnter" 
      @ enter = "enter" 
      @Before -Deixar = "beforeLeave" 
      @leave = "licença"> 
      <div v-show = "show"> 
        Olá mundo ! 
      </ div> 
    </ transition>
    VUE ({ 
      EL: '#app' , 
      de dados: função () {
         return { 
          Show: a true 
        } 
      }, 
      Métodos: { 
        Alternar () { 
          a esta = O .Show! A este o .Show; 
        }, 
        // antes de entrar, a animação estado inicial 
        beforeEnter (EL) { 
          el.style.opacity = 0 ; 
        }, 
        // fim do estado de animação 
        Enter (EL, FEITO) { 
          el.style.opacity = 1. ;
           // ouvindo final dos eventos de animação, feito realizado, se não há fim evento ouvinte acima for exibido corretamente escondido, mas sempre ocupar o módulo posição div
          el.addEventListener ( 'transitionend' , DONE) 
        }, 
        // antes estado deixando 
        beforeLeave (EL) { 
          el.style.opacity = 1. ; 
        }, 
        // depois de deixar o estado 
        Leave (EL, FEITO) { 
          el.style.opacity = 0 ; 
          el.addEventListener ( 'transitionend' , DONE) 
        } 
      }, 
    })

   </ script> 
</ body>

4. A introdução de animação animate.css

A animação final é relativamente simples de conseguir efeitos de animação directamente através da introdução de animate.css,

introduzir-classe activa: animação para o processo de animação
deixar-classe ativa: Animação deixar o processo de animação

animate.css site 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 = "app"> 
        <button @ clique = "toggle"> alternância </ button> 
        <transition introduzir-active-class = "animado bounceInLeft" 
            deixar -active-class = "animado bounceOutLeft" > 
            <div v-show = "show"> mundo hellow </ div> 
        </ transition> 
    </ div> 
    <script> var app = new Vue ({ 
            el: '#app' ,
            dados () { return { 
                    show: falsa
        
                
                } 
            }, 
            Métodos: { 
                alternância () { 
                    este .mostrar =! este .mostrar 
                } 
            }, 
        })
     </ script> 
</ body>