O sistema de transição do Vue.js permite aplicar automaticamente efeitos de transição quando os elementos são inseridos ou removidos do DOM. O Vue.js acionará transições ou animações CSS para você no momento certo e você também poderá fornecer a função de gancho JavaScript correspondente para executar operações de DOM personalizadas durante o processo de transição.
Para aplicar o efeito de transição, você precisa usar o recurso de transição no elemento de destino:
<div v-if = "show" transition = "my-transição"> </div>
O recurso de transição pode ser usado com os seguintes recursos:
• V-IF
• V-SHOW
• V-for (disparado apenas ao inserir e excluir, usando o plugin da lista de animação VUE)
• Componentes dinâmicos (consulte componentes para introdução)
• No nó raiz do componente, e acionado pelo método DOM da instância VUE (como a VM. $ APENDTO (EL)).
Ao inserir ou excluir um elemento com uma transição, Vue Will:
1. Tente encontrar o objeto JavaScript Transition Hook com ID "My -Transição" - Registre -se na opção Vue.Transition (ID, Hooks) ou Transitions. Se encontrado, o gancho correspondente será chamado em diferentes estágios da transição.
2. Cheirar automaticamente o elemento de destino para transições ou animações CSS e adicione/remova o nome da classe CSS quando apropriado.
3. Se o gancho JavaScript não for encontrado e a transição/animação CSS não for detectada, a operação DOM (inserir/delete) será executada imediatamente no próximo quadro.
Transição CSS
Exemplo
Uma transição típica de CSS é assim:
<div v-if = "show" transition = "expand"> hello </div>
Em seguida, adicione as regras CSS para `.expand-transição`,` .expand-anter` e `.expand-leave`:
/* Requerido*/. Expandir-transição {transição: todos .3s facilidade; Altura: 30px; preenchimento: 10px; Background-Color: #eee; Overflow: Hidden;}/* .Expand-Entra define o estado de início da entrada* //* .expand-loave Define o estado final da partida*/. preenchimento: 0 10px; Opacidade: 0;}Você pode obter transições diferentes no mesmo elemento através da ligação dinâmica:
<div v-if = "show": transition = "transitionName"> hello </div>
novo Vue ({el: '...', dados: {show: false, transitionName: 'Fade'}})Além disso, os ganchos JavaScript podem ser fornecidos:
Vue.Transition ('Expand', {Antes dotester: function (el) {el.textContent = 'Antes'}, enter: function (el) {el.textContent = 'enter'}, hanled »l (function): eL.Teax (eL.TextContent = 'Afterenter'}, EntererCelled: function: function (function) (eL.TextContent = 'Afterenter'}, EnterCeld: (el) {el.textContent = 'beforeleave'}, deixe: function (el) {el.textContent = 'leave'}, pós -abeto: function (el) {el.textContent = 'AfterLeave'}, levecanceled: function (e el) {// manipulam cancelação})Nome da classe CSS de transição
A adição e a comutação dos nomes de classe dependem do valor do atributo de transição. Por exemplo, transição = "Fade", haverá três nomes de classe CSS:
1 .. A transição de Fades é sempre retida no elemento.
2..Fade-Enter define o estado inicial de entrar na transição. Aplique apenas um quadro e exclua -o imediatamente.
3..Fade-LEAVE define o estado final de deixar a transição. Efetivo no início da transição de partida e exclua depois que ela termina.
Se o atributo de transição não tiver valor, os nomes da classe serão .V-transição, .v-entra e .v-LEAVE por padrão.
Nome da classe de transição personalizada
1.0.14 Novo
Podemos declarar um nome de classe de transição CSS personalizado em uma definição de JavaScript de transição. Esses nomes de classe personalizados substituem os nomes de classe padrão. Pode ser muito útil quando você precisa cooperar com bibliotecas de animação CSS de terceiros, como o Animate.css:
<div vs-show = "ok" transition = "bounce"> me assista bounce </div>
Vue.Transition ('Bounce', {Enterclass: 'BounceinLeft', Leaveclass: 'Bounceoutright'})Declarar explicitamente o tipo de transição CSS
1.0.14 Novo
O vue.js precisa adicionar um ouvinte de eventos ao elemento de transição para ouvir quando a transição terminar. Com base no CSS utilizado, o evento é um Transitionend ou Animationend. Se você usar apenas um dos dois, o Vue.js poderá inferir automaticamente o tipo de evento correspondente com base nas regras CSS efetivas. No entanto, em alguns casos, um elemento pode precisar ter dois tipos de animações ao mesmo tempo. Por exemplo, você pode desejar acionar uma animação CSS e o elemento tem um efeito de transição CSS quando o mouse é suspenso. Nesse caso, você precisa declarar explicitamente o tipo de animação (animação ou transição) que você deseja manusear:
Vue.Transition ('Bounce', {// Este efeito de transição apenas ouvirá o tipo de evento `animationend`: 'Animation'})Explicação detalhada do processo de transição
Quando a propriedade do show mudar, o Vue.js insere ou excluirá o elemento <div> de acordo, alterando o nome da classe CSS de transição de acordo com as seguintes regras:
• Se o show se tornar falso, o vue.js irá:
1. Ligue para o gancho Beforeleave;
2. Adicione o nome da classe V-Leave ao elemento para acionar a transição;
3. Ligue para o gancho de licença;
4. Aguarde a transição termine (ouça o evento de transição);
5. Exclua elementos do DOM e exclua o nome da classe V-LEAVE;
6. Ligue para o gancho pós -abastecimento.
• Se o show se tornar verdadeiro, o vue.js irá:
1. Ligue para o gancho antes;
2. Adicione o nome da classe V-ENTER ao elemento;
3. Insira -o no DOM;
4. Ligue para o gancho Enter;
5. Força o layout do CSS uma vez para tornar o V-entra eficaz. Em seguida, exclua o nome da classe V-Enter para acionar a transição e retornar ao estado original do elemento;
6. Aguarde a transição terminar;
7. Ligue para o gancho posterior.
Além disso, se um elemento for removido enquanto sua transição de entrada ainda estiver em andamento, o gancho de entretenimento é chamado para limpar as alterações ou entrar em temporizadores criados. O mesmo vale para deixar a transição por sua vez.
Quando todas as funções do gancho acima são chamadas, eles apontam para a instância de Vue a que pertencem. Regras de compilação: em que contexto a transição é compilada, é esse ponto para qual contexto.
Por fim, a entrada e a licença pode ter um segundo parâmetro opcional de retorno de chamada que controla explicitamente como a transição termina. Portanto, não há necessidade de aguardar o evento CSS TransitionEnd, o vue.js aguardará que você chame esse retorno de chamada manualmente para encerrar a transição. Por exemplo:
ENTER: function (el) {// não existe um segundo parâmetro // o evento CSS Transicerend determina quando a transição termina}vs.
Digite: function (el, feito) {// existe um segundo parâmetro // a transição termina apenas quando `done 'é chamado}<p> Quando vários elementos fazem a transição, o Vue.js será o processo em lote e forçará apenas o layout uma vez.
Animação CSS
O uso da animação CSS está em transição para o CSS. A diferença é que, na animação, o nome da classe V-ENTER não é excluído imediatamente após o nó ser inserido no DOM, mas é excluído quando o evento AnimationEND é acionado.
Exemplo: (prefixo de compatibilidade omitido)
<span v-show = "show" transition = "bounce"> olhe para mim! /* Caso contrário, a animação em escala não funcionará*/}. Bounce-Entr {Animação: Bounce-In .5S;}. Bounce-Leave {Animation: Bounce-Out .5s;}@keyframes Bounce-in {0% {Transform: Scale (0); } 50% {transform: escala (1.5); } 100% {transform: escala (1); }}@keyframes bounce {0% {transform: escala (1); } 50% {transform: escala (1.5); } 100% {transform: escala (0); }}Javascript Transition
Você também pode usar apenas ganchos JavaScript sem definir nenhuma regra CSS. Ao usar apenas o JavaScript, os ganchos Enter e Leave precisam ligar para o retorno de chamada concluído, caso contrário eles serão chamados de síncrona e a transição terminará imediatamente.
É uma boa idéia declarar explicitamente CSS: False para transições de JavaScript, e o Vue.js pulará a detecção de CSS. Isso também impedirá que as regras do CSS interfiram na transição inadvertidamente.
No exemplo a seguir, usamos o jQuery para registrar uma transição JavaScript personalizada:
Vue.Transition ('Fade', {css: false, enter: function (el, feito) {// O elemento foi inserido no DOM // chamado após a animação $ (El) .css ('opacity', 0) .animate ({opacity: 1}, 1000, done)}, EntercEld. {// O mesmo que digite $ (el) .animate ({opacity: 0}, 1000, feito)}, leavecanceled: function (el) {$ (el) .stop ()}})Em seguida, use o recurso de transição:
<P transição = "Fade"> </p>
Transição assintótica
As transições podem ser usadas juntamente com o V-For para criar uma transição assintótica. Adicione um recurso escalonado, inserir escaler ou saídas ao elemento de transição:
<div v-for = "Item na lista" transition = "STAGGER" STAGGER = "100"> </div>
Como alternativa, forneça um gancho de craque, entrelaçam ou deixam de sair para melhor controle:
Vue.Transition ('STAGGER', {STAGGER: function (index) {// Cada item de transição adiciona 50ms de atraso //, mas o limite máximo de atraso é de 300ms retorna matemática.min (300, índice * 50)}})Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
Para tutoriais nos componentes vue.js, clique no tutorial de aprendizado de componentes do Tópico Especial Vue.js para aprender.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.