Por meio do sistema de transição do Vue.js, você pode adicionar facilmente efeitos de animação de transição ao processo de inserção/remoção de nós DOM. O Vue adicionará/removerá nomes de classe CSS no momento apropriado para acionar efeitos de transição/animação CSS3. Você também pode fornecer a função de gancho JavaScript correspondente para executar operações DOM personalizadas durante o processo de transição.
Tomando a instrução v-transition = "my-transição" como exemplo, quando o nó DOM com esta instrução é inserido ou removido, a vue será:
Use o ID de transição do MY para descobrir se existe um objeto Javascript Hook registrado. Este objeto pode ser registrado globalmente por Vue.Transition (ID, Hooks) ou definido dentro do componente atual através da opção Transição. Se este objeto for encontrado, o gancho correspondente será chamado em diferentes estágios da animação de transição.
Detecte automaticamente se o elemento de destino tem efeitos de transição CSS ou efeitos de animação aplicados e adicione/remova o nome da classe CSS no momento apropriado.
Se a função JavaScript Hook não for fornecida e o efeito de transição/animação CSS correspondente não for detectado, a inserção/remoção do DOM será realizada imediatamente no próximo quadro.
Todos os efeitos de transição do vue.js só entrarão em vigor se a operação DOM for desencadeada através do vue.js. O acionamento pode ser feito por instruções internas, como V-IF, ou através de métodos de instância do VUE, como a VM. $ Appendto ().
Efeito de transição CSS
Um efeito de transição CSS típico é definido da seguinte forma:
<div v-if = "show" v-transição = "expandir"> hello </div>
Você também precisa definir três classes CSS: .Expand-transição, .Expand-entra e .expand-Leave:
.expand transição {transição: todos .3s facilitar; Altura: 30px; preenchimento: 10px; Background-Color: #eee; Overflow: Hidden;}. Expand-Enter, .Expand-Leave {Hight: 0; preenchimento: 0 10px; Opacidade: 0;}Ao mesmo tempo, você também pode fornecer ganchos de JavaScript:
Vue.Transition ('Expand', {antes doErS: function (el) {el.textContent = 'Antes'}, enter: function (el) {el.textContent = 'enter'}, hanled °: function (eL) {el.textent = '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})resultado
O nome da classe CSS usado aqui é determinado pelo valor da diretiva V-Transição. Tomando v-transição = "desbotamento" como exemplo, a classe CSS. Fade-transição sempre existirá, e. Fade-entr e. Fade-Leave serão adicionados automaticamente ou removidos no momento certo. Quando a diretiva de transição em V não fornece um valor, os nomes de classe CSS usados serão a transição .v-transição padrão, .v-entra e .v----isquedia.
Quando o atributo do show muda, o Vue insere/remove o elemento <div> com base em seu valor atual e adiciona/remova a classe CSS correspondente no momento apropriado, como segue:
Quando o show se torna falso, Vue Will:
1. Ligue para o gancho Beforeleave;
2. Aplique a classe CSS .V-LEAVE no elemento para acionar o efeito de transição;
3. Ligue para o gancho de licença;
4. Aguarde a execução do efeito de transição; (Ouça o evento de transição)
5. Remova os elementos do DOM e remova a classe CSS .V-LEAVE.
6. Ligue para o gancho pós -abastecimento.
Quando o show é verdadeiro, Vue Will:
1. Ligue para o gancho antes;
2. Aplique a classe CSS.v-entra no elemento;
3. Insira o elemento no DOM;
4. Ligue para o gancho Enter;
5. Aplique a classe .v-entra e, em seguida, force o layout CSS para garantir que o .v-entra em vigor; Por fim, remova .v-entra para acionar o elemento para fazer a transição para o seu estado original.
6. Aguarde a execução do efeito de transição;
7. Ligue para o gancho posterior.
Além disso, se um elemento que estiver executando um efeito de transição recebido for removido antes da conclusão da transição, o gancho de Opreciação será executado. Esse gancho pode ser usado para limpeza, como remover temporizadores criados no Enter. O mesmo se aplica a elementos que estão sendo reinseridos durante a transição.
Quando todas as funções do gancho acima são executadas, isso aponta para a instância do vue correspondente. Se um elemento em si for o nó raiz de uma instância do VUE, a instância será aplicada assim; Caso contrário, isso aponta para a instância à qual a instrução de transição pertence.
Finalmente, as funções Enter e Leave Hook podem aceitar um segundo parâmetro opcional: uma função de retorno de chamada. Quando a assinatura da sua função contém um segundo parâmetro, significa que você espera usar esse retorno de chamada para concluir explicitamente todo o processo de transição, em vez de depender do Vue para detectar automaticamente eventos de transição das transições CSS. por exemplo:
Enter: function (el) {// nenhum segundo parâmetro // O final do efeito de transição é determinado pelo evento final de transição CSS}Vs.
Enter: function (el, feito) {// Há um segundo parâmetro // O final do efeito de transição deve ser determinado manualmente chamando de `done`}Quando vários elementos executam efeitos de transição ao mesmo tempo, o processo Vue.js fará o lote para garantir que o layout forçado seja acionado apenas uma vez.
Animação CSS
As animações do CSS são chamadas da mesma maneira que o efeito de transição do CSS. A diferença é que, na animação, a classe .v-Enter não é removida imediatamente após o nó ser inserido no DOM, mas é removido quando o evento do Animationend é acionado.
Exemplo: (prefixo de compatibilidade omitido)
<span v-show = "show" v-transição = "bounce"> olhe para mim! </span>
.Bounce-Enter {Animação: Bounce-In .5S;}. Bounce-Leave {Animação: Bounce .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); }}resultado
Efeitos de transição pura de JavaScript
Você também pode usar ganchos JavaScript sem definir nenhuma regra de transição CSS. Ao usar apenas ganchos JavaScript, os ganchos Enter e Leave devem usar o retorno de chamada concluído, caso contrário, eles serão chamados de síncrona e a transição terminará imediatamente. No exemplo a seguir, usamos o jQuery para registrar um efeito de transição JavaScript personalizado:
Vue.Transition ('Fade', {enter: function (el, feito) {// O elemento foi inserido no DOM neste momento // chamada feita quando a animação é concluída $ (El) .css ('opacity', 0) .Animate ({Opacity: 1}, 1000, done)}, EntercEld. feito) {// semelhante ao gancho Enter $ (el) .animate ({Opacity: 0}, 1000, feito)}, LeaveCanceled: function (el) {$ (el) .stop ()}})Depois de definir esta transição, você pode chamá-la especificando o ID correspondente à transição V:
<P V-transição = "Fade"> </p>
Se um elemento que utiliza apenas os efeitos de transição de JavaScript for afetado por outras regras de transição/animação CSS, isso pode interferir no mecanismo de detecção de transição CSS da VUE. Ao encontrar essa situação, você pode proibir a detecção de CSS adicionando CSS: false ao seu objeto Hook.
Efeito gradualmente de transição
Ao usar a transição em V e a repetição V, podemos adicionar um efeito de transição progressivo ao elemento da lista. Você só precisa adicionar recursos de escalonamento, inserir ou deixar de sair (em milissegundos):
<div v-repeat = "list" v-transição stagger = "100"> </div>
Ou você também pode fornecer ganchos de craque, entrada ou Eavestagger para controle granular mais fino:
Vue.Transition ('STAGGER', {STAGGER: function (index) {// Adicione 50ms Atraso a cada elemento de transição, // Mas o atraso máximo é de 300ms retornar matemática.Min (300, Índice * 50)}})Exemplo:
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.