Olá Habr! Decidi iniciar minha atividade traduzindo artigos para o russo, o que me beneficiou bastante. Espero que você venha a calhar. Noto que tentei traduzir literário, não literalmente.
Em primeiro lugar, apresento a tradução do artigo
“Vue.js render functions and transitions” de Hajime Yamasaki Vukelic.
Vue.js processa funções e transições
A documentação do Vue.js em relação às funções de renderização é ruim. Para usuários que usam JSX com funções de renderização, isso pode criar problemas. Neste artigo, veremos como criar transições nesse cenário específico.
Eu uso o JSX nos exemplos, mas tudo funciona com funções simples de renderização do JavaScript, já que o JSX é apenas um açúcar sintático para chamadas h (). Se você quiser saber mais sobre este tópico, consulte este
artigo .
Como as transições funcionam em geral
A essência das transições é que você possui um componente de transição interno que atribui classes a elementos que são montados (enter) ou desmontados (leave).
Dança Pikabu
A principal nuance: como determinar o local de instalação ou desmontagem de elementos. Este problema pode ser resolvido de várias maneiras.
Você pode usar o operador ternário para implementar a aparência / desaparecimento de um elemento:
render(h) { <transition> {this.showDiv ? <div class="myDiv">Hello</div> : null} </transition> }
ou para substituir um item por outro:
render(h) { <transition> {this.showOneOrTheOther ? <div class="myDiv">Hello</div> : <div class="myOtherDiv">Hello again</div> } </transition> }
Não, eu estava apenas brincando. Obviamente, você não pode usar o operador ternário sem parâmetros adicionais para substituir esses elementos. No entanto, há uma nuance. O algoritmo de comparação decide que já existe um elemento lá; portanto, em vez de excluí-lo do DOM, apenas o corrige para que se pareça com outro elemento.
Será melhor se você usar key ao substituir elementos:
render(h) { <transition> {this.showOneOrTheOther ? <div key="myDiv" class="myDiv">Hello</div> : <div key="myOtherDiv" class="myOtherDiv">Hello again</div> } </transition> }
Se houver uma chave, dois elementos são completamente alterados (o antigo é desmontado e o novo é montado em seu lugar), enquanto as chaves são diferentes.
Da mesma forma, se você deseja trocar um componente ou elemento de outro do mesmo componente / elemento:
render(h) { <transition> <div key={this.subcomponentKey}> <MyComponent /> </div> </transition> }
No exemplo acima, o método this.subcomponentKey calculará de alguma forma a chave correspondente para o componente MyComponent.
Principais diferenças
Enquanto falamos sobre chaves, lembre-se de que os elementos / componentes sempre são exibidos completamente quando a chave é alterada. Por outro lado, enquanto a chave permanecer a mesma, os elementos / componentes não serão alterados.
Não deixe que isso te pegue de surpresa. Antes de adicionar acidentalmente uma chave a quase tudo que se move (ou deve se mover), considere cuidadosamente qual deve ser o valor dessa chave. Primeiro verifique sem uma chave, anote os resultados e, em seguida, adicione a chave e veja se consegue repetir o mesmo efeito. Se a interface do usuário não for atualizada, você provavelmente selecionou o valor da chave errado.
Adicionando Animação
Agora que sabemos como fazer com que nossos elementos desapareçam e voltem, é hora de trabalhar na animação.
No caso mais simples, temos duas classes. Uma classe é sempre aplicada e a outra é aplicada quando um elemento / componente é montado ou desmontado.
// my.css .base { transition: transform 1s; } .out { transform: translateX(-100vw); }
Agora adicione estas classes ao código:
render(h) { <transition enter-class="out" leave-to-class="out"> {this.someProp ? <div class="base">Hello</div> : null} </transition> }
Essas classes (enter-class e leave-to-clas) estão bem descritas na
documentação . Leia sobre eles lá.
A classe enter serve como um repositório para estilos que se aplicam imediatamente após a montagem de um elemento. Imediatamente após isso, a classe é excluída. Adicionamos transições para criar uma animação entre o momento em que a classe enter é usada e o tempo em que não existe (quando apenas a classe .base é usada).
A classe da classe de saída é aplicada imediatamente antes que um item seja excluído. O Vue.js aguarda a conclusão da animação e remove o item da árvore DOM. Novamente, usamos transições para criar animações.
Em nosso exemplo, usamos a mesma classe .out para entrar e sair, mas podemos usar classes diferentes para dois eventos.
Conclusão
Esperamos que agora você entenda os principais conceitos das transições do Vue.js. quando usado nas funções de renderização e com o JSX. No entanto, as transições do Vue.js. oferecem muito mais recursos, como a capacidade de conectar-se a eventos de transição usando JavaScript e, portanto, fazem até algumas coisas não relacionadas à animação (como traps do ciclo de vida). Terminarei o artigo aqui e deixarei os experimentos para meus queridos leitores.
Feliz hacking!