Este artigo é uma explicação mais abrangente e detalhada compilada pelo editor em combinação com documentos oficiais, com códigos cada vez mais completos.
Este artigo vem do documento oficial:
http://cn.vuejs.org/guide/transitions.html
Vamos dar uma olhada no conhecimento relevante da animação de transição:
① Definição de animação de transição;
Simplificando, é o que a forma desaparecerá e aparecerá quando o módulo desaparecer e aparecer;
Se você deseja usar a animação de transição, adicione atributos à tag:
transição = "Nome da animação de transição"
Por exemplo:
<div v-if = "box_1" transition = "mytran"> 1 </div>
Aqui está Mytran, que é o nome da animação de transição. É um nome de classe. A animação adicionará várias extensões diferentes com base nesse nome (veja abaixo para obter detalhes)
② Eventos de ligação à animação de transição:
【1】 V-if
【2】 V-Show
【3】 V-For (acionados apenas ao inserir e excluir, você pode escrevê-lo ou usar o plug-in da lista animada da VUE);
Escreva para você, por exemplo:
<div v-for = "i em itens" transition = "mytran"> {{i}} </div>Um breve método de escrita de animação (veja abaixo)
【4】 componentes dinâmicos;
[5] No nó raiz do componente e é acionado pelo método DOM da instância do VUE (por exemplo: vm. $ Appendto (EL)). Provavelmente, adicione o componente a um nó raiz.
③CSS Animação:
[1] Primeiro, você precisa ter o atributo de transição e depois obter seu valor;
【2】 Em segundo lugar, existem três nomes de classes em CSS com valores, a saber:
Supondo que o valor da transição seja mytran, o nome da classe é
ilustrar
.Mytran-transição
No estado de animação, o atributo de transição do CSS é colocado aqui, e a classe que ele representa sempre existirá no DOM;
Além disso, o estilo aqui substituirá o estilo fornecido pela classe padrão do rótulo
.MyTran-Enter
Ao entrar, o componente se expande deste estado CSS para o estado atual do CSS, e essa classe tem apenas o primeiro quadro.
.MyTran-LEAVE
Ao sair, o componente restaura esse estado do estado CSS original. Esta classe entra em vigor desde o início da saída e é excluída no final da saída.
Como código:
<estilo> .Box {Width: 100px; Altura: 100px; borda: 1px vermelho sólido; Exibição: bloco embutido; } /* Isso define a situação de animação e o estilo quando existe. Esse estilo substituirá o estilo na classe*/ .mytran-transição {transição: todos os 0.3s facilidade; Background-Color: Greenyellow; } /* .mytran-Enter Define o estado inicial da entrada* / /* .mytran-Leave define o estado final da partida* / .mytran-entra, .mytran-lave {altura: 0; largura: 0; } </style> <div id = "app"> <botão @click = "alteração"> clique para ocultar e mostrar aleatoriamente </butut> <br/> <div v-if = "box_1" transition = "mytran"> 1 </div> <div <SCRIPT> var VM = new Vue ({el: '#app', dados: {box_1: true, box_2: true, box_3: true}, métodos: {alteração: function () {for (var i = 1; i <4; i ++) {this ['box_' i] =)) (). 300); </script>Clicar fará com que 3 blocos ocorram ou exibirá;
④JavaScript Hook:
[1] Simplificando, isso não afeta a animação CSS (ainda muda nessas três categorias);
[2] Isso é usado principalmente para pegar a entrada e partir de quatro momentos cada, e é usado para fazer certas coisas;
【3】 Esses oito momentos são:
Digite: Antes (antes da ENTER), enter (antes de entrar na animação apenas começar), depois (antes de entrar no final da animação), entrepara (antes da interrupção da ENTER);
Saída: beforeleave (antes da saída), saia (a animação de saída acabou de iniciar), após a elaboração (a animação de saída terminou), o LeaveCanceled (a saída é interrompida);
[4] A modificação do DOM será restaurada em alguns casos. Por exemplo, modificar a propriedade TextContent de DOM na etapa de licença restaurará o estado original quando o Dom entrar; Mas, se modificado na etapa Enter, ele não será restaurado.
Como código:
Vue.Transition ('mytran', {antes dotest: function (el) {// antes de entrar no console.log ("Digite a hora de início da animação:" + new Date (). GetTime (); }, Beforeleave: function (el) {console.log ("Deixe o tempo de início da animação:" + new Date (). GetTime ());⑤ Custom Transition Class Nome:
O motivo para personalizar o nome da classe de transição é que não podemos exigir que o estilo de cada animação CSS seja escrito de acordo com o método de escrita padrão do VUEJS (como baixamos o código escrito por outros);
Nota: A definição precisa ser feita antes de declarar a instância de vue relevante.
Primeiro de tudo, recomendo uma coleção de animações recomendadas pelo tutorial oficial do VUEJS: (este não é um link de download, você precisa abri -lo para encontrar o link de download antes de poder fazer o download)
https://daneden.github.io/animate.css/
Após o download, importe este arquivo CSS e comece a personalizar a animação;
<div id = "app"> <botão @click = "altere"> clique para ocultar e mostrar aleatoriamente </but uma button> <br/> <div v-if = "box" transition = "bounce"> 1 </div> </div> <cript> vue.transition ("bounce", {Enterclass: 'BountEnLeft', lear. '#app', dados: {caixa: true}, métodos: {alteração: function () {this.box =! this.box; </script>explicar:
【1】 As etiquetas de animais são obrigadas a ter a classe animada;
【2】 Enterclass e Leaveclass são equivalentes ao XXX-ENTER anterior e ao XXX-LEAVE;
【3】 O efeito é piscar da esquerda e piscar da direita.
[4] Você precisa definir uma animação antes de declarar a instância do VUE, caso contrário, será inválida;
⑥Use Animações
Em Vuejs, animação de animação e animação de transição são diferentes.
Simplificando, a animação de transição é dividida em três etapas: classe permanente, classe acionada ao entrar e classe acionada ao sair; Somente classe permanente possui atributos de animação de transição, e as outras duas etapas têm apenas o estado do CSS;
A animação da animação é dividida em duas etapas: a classe acionada ao entrar e a classe acionou ao sair. Obviamente, a classe de transição xxx existe no DOM (esta classe pode ser usada para definir a origem da animação ou simplesmente não definir esta classe);
Na animação da animação, as classes de classe ao entrar e sair devem ter efeitos de animação, por exemplo:
@KeyFrames FAT {0% {Width: 100px} 50% {Width: 200px} 100% {Width: 100px}} .Fat-Leave, .Fat-Enter {Animação: FAT 1S Ambos; }Ao entrar e sair, os nomes de classes executados são os mesmos que as transições e estão nos formatos de XXX-Leave e XXX-Enter;
Obviamente, você também pode personalizar o nome da classe.
Código de exemplo:
<estilo> .Box {Width: 100px; Altura: 100px; borda: 1px vermelho sólido; Exibição: bloco embutido; } @keyframes gord {0% {width: 100px} 50% {width: 200px} 100% {width: 100px}} .fat-leave, .fat-dir {animação: gordas 1s ambos; } </style> <div id="app"> <button @click="change"> Click to hide and display randomly</button> <br/> <div v-if="box" transition="fat">1</div> </div> <script> var vm = new Vue({ el: '#app', data: { box: true }, methods: { change: function () { this.box = !this.box; } }}); </script>Efeito:
Desaparecer: seja mais largo primeiro, depois recupere e depois desapareça;
Digite: aparece, amplie, recupere, fique;
Aqui estou preguiçoso e compartilho o mesmo efeito de animação.
⑦ Além disso, existe
[1] declarar explicitamente o tipo de animação (se a animação tiver transição e animação ao mesmo tempo, e uma delas será executada em diferentes situações);
[2] Explicação detalhada do processo de transição (a ordem da execução do JS Hook e da execução do CSS quando a animação é acionada);
[3] CSS Animation (isto é, animação, como escrito acima, omitido em detalhes);
[4] JavaScript Transition (não é um gancho JS, um gancho significa que uma certa função será chamada em um determinado estágio, mas esse gancho não tem nada a ver com animação) e usará JavaScript para controlar a animação, como o método animado de jQuery;
【5】 Uma transição gradual usada por V-For;
Como não está disponível por enquanto, é omitido. Se você precisar visualizá -lo, abra a conexão:
http://cn.vuejs.org/guide/transitions.html
O acima exposto é uma análise abrangente do caso de animação de transição de Vuejs do sétimo Vuejs apresentado a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!