Continuando com o nosso exercício de animação da primeira parte anterior.
Adicionaremos mais algumas animações à nossa aplicação angular.
Em particular, adicionaremos uma animação que será acionada
quando as mudanças de rota ocorrerem em nosso aplicativo de página única.
Nós também vamos adicionar em uma animação que permite
uma exibição para ser exibido quando os dados são obtidos do lado do servidor,
então quando você está descartando o girador em sua vista e, em seguida, renderizando a vista,
nós queremos que a vista seja projetada na tela
em vez de simplesmente aparecer todos de repente.
Então, algumas novas animações que vamos adicionar neste exercício.
Ao longo do caminho quando você tem várias animações em seu aplicativo,
pode ser melhor refatorar o código de uma forma que seja mais
gerenciável em vez de incluir a
fragmentada cada pouco de um gatilho em cada um dos arquivos
dentro de nossos componentes de nossa aplicação angular.
Então, vamos fazer todas essas etapas como parte dois do exercício de animação.
A primeira coisa que vou fazer é que vamos refatorar
o código que já fizemos como parte um deste exercício de animações.
Esta abordagem que estou ilustrando para vocês aqui é apenas a minha abordagem sugerida.
Você não precisa necessariamente seguir exatamente assim,
mas eu sinto que isso ajuda a organizar o código muito melhor.
Então, o que eu vou fazer é como se tivéssemos uma pasta separada para serviços,
nós tínhamos uma pasta separada para os recursos compartilhados e assim por diante,
Eu vou criar uma nova pasta chamada animações.
Vamos armazenar todo o código relacionado à animação lá e, em seguida, fazer uso dele importando
sempre que necessário dentro de nossos componentes em nossa aplicação angular.
Então, indo para o nosso código,
dentro da pasta do aplicativo eu vou criar uma nova pasta e nomeá-la Animações.
Dentro desta pasta Animations,
Eu vou criar um novo arquivo e por falta de uma palavra melhor eu
vou chamá-lo arquivo app.animation.ts.
Em seguida, dentro disso, eu vou importar
as várias classes de animações angulares que eu fiz no componente DishDetail.
Então, indo para o componente DishDetail,
você vai lembrar que a primeira coisa que fiz
foi eu adicionei esta linha ao componente DishDetail.
Eu vou cortá-lo do componente DishDetail e
em vez colá-lo nas animações do aplicativo,
de modo que onde quer que este aplicativo animações é
incluído importando-o para nossos outros componentes,
isso virá automaticamente para o direito lá.
Agora, dentro deste app animações,
Eu vou criar algumas funções de fábrica que exportarão os vários gatilhos.
A primeira função de fábrica que criarei
esta função de exportação e chamarei de visibilidade.
Esta função de visibilidade retornará o código
correspondente ao gatilho que fizemos no componente DishDetail.
Então, voltando para o componente DishDetail,
Eu só vou cortar este código inteiro para o gatilho a partir daqui e, em seguida, voltar para
app animation.ts arquivo e, em seguida, colá-lo em
lugar bem ali na função aqui.
Isso agora se torna uma função que está disponível para importação do meu componente DishDetail.
Então, voltando ao componente DishDetail.
Agora, no lugar onde eu importei o gatilho e outras classes,
Eu vou agora importar a visibilidade
do aplicativo da animação, animação,
e então essa função agora ficará disponível para mim dentro do meu código aqui.
Assim, uma vez que eu faço isso dentro de minhas animações,
eu posso simplesmente chamar essa função para que eu possa dizer
visibilidade e, em seguida, o código de gatilho agora se torna parte do meu componente aqui.
Agora, isso eu acho é uma maneira melhor de organizar o código para minhas animações.
Agora, se eu precisar usar o mesmo gatilho em outro componente,
eu posso simplesmente seguir essa abordagem para incluir isso em meus outros componentes também.
Vamos salvar as alterações e, em seguida, ir e dar
uma rápida olhada em nosso aplicativo no navegador.
Vá para o navegador, você vê que quando eu vou para o componente de disco,
o componente de disco está ali e, em seguida,
ele vai ter o mesmo comportamento de animação de antes.
Então, refatorando o código,
eu consegui organizar o código e
ainda funciona exatamente da mesma forma que a parte um deste exercício.
Se você tivesse apenas uma única animação usada em um único lugar,
então a abordagem anterior funciona muito bem, mas se você tiver
múltiplo e especialmente se você estiver reutilizando o código em muitos componentes,
então essa abordagem refatorada é uma maneira muito melhor de implementar a solução.
A próxima atualização que vou fazer é adicionar animações nas mudanças de rota.
Então, quando eu vou de uma vista para outra vista, então, por exemplo,
da casa para o sobre ou prestes a menu ou menu para entrar em contato ou vice-versa,
então eu quero ser capaz de animar essas mudanças dentro do meu aplicativo.
Então, para fazer isso,
Vou introduzir mais uma função no arquivo animation.ts app.
Então, indo para o arquivo animation.ts app,
Eu vou exportar outra função que eu chamo como FlyInOut,
você vai ver por que eu uso este nome aqui.
Então isso retornaria uma função que é um gatilho com o nome FlyInOut.
Então, dentro estava gatilho,
Eu vou definir o código para o que este gatilho vai fazer.
Então, aqui, eu vou definir um estado aqui com o nome estrela,
então não importa o estado que é,
isso é aplicável a qualquer estado e então eu vou definir
alguns estilos aqui e os dois estilos que eu
vai definir é opacidade é uma
e transformar é TranslaTeX (0),
de modo que significa que ele está em sua posição normal neste caso.
Agora, quando eu definir transições,
eu também posso definir transições dessa maneira.
Então, se eu disser entrar transição,
a transição enter é uma abreviação para dizer indo de
estado vazio para um do estado existente.
Então, o que significa que a exibição está entrando em meu aplicativo.
Então digite, o que significa que agora quando eu rotear para
uma determinada exibição em meu aplicativo de página única,
essa exibição estará entrando na exibição.
Então, é por isso que eu posso aplicar a transição entre dois pontos nesse caso.
Agora, da mesma forma, há outra transição chamada dois-pontos
deixar que eu posso aplicar quando você faz a transição para fora do
esta vista e, em seguida, você está tirando a visão da saída do roteador do seu aplicativo.
Então, vamos fazer tanto entrar e o outro que é sair.
Então, duas funções que eu vou definir aqui,
transição entrar e transição sair aqui.
Então, para o enter,
o que eu quero definir?
Para entrar, deixe-me definir a função aqui,
e da mesma forma, para deixar também,
Eu vou definir as funções aqui.
Então, criando este andaime aqui.
Agora, posso inserir as informações que quero dentro dessas transições.
Então, quando esta transição ocorre,
Vou começar com um estilo de transformação,
TranslaTeX menos 100 por cento,
o que significa que a vista está completamente fora da vista aqui.
Então, você começa lá a partir de menos 100 por cento neste momento.
Então, quando você está entrando,
você vai começar com isso,
e então também neste ponto,
eu vou animar, e animar em 500.
Então, quando eu especificar 500 como este,
você pode até fazê-lo desta maneira.
Alternativamente, você pode dizer, entre aspas,
“500ms” e, em seguida, você pode até usar facilidade de acesso ou facilidade de saída.
Então, deixe-me modificar isso em
500ms ease-in porque esta vista está chegando.
Então, vamos facilitar a exibição.
Então, para sair, vou aplicar a transição como animate,
e então eu diria 500 milissegundos, novamente, ease-out.
Então, esta vista está saindo.
Então, queremos facilitar essa visão.
Então, neste caso,
o estilo que eu aplico
é transformar,
TranslaTeX 100 por cento.
Então, essa visão desaparecerá completamente da tela lá.
TranslaTeX 100 por cento.
Além disso, vou definir a opacidade como zero.
Então, desaparece completamente da tela.
Então, esta animação irá adicionar um bom novo recurso aqui.
Agora, para este também,
Eu posso adicionar, começando com uma opacidade de zero, se você preferir.
Vamos adicionar isso e ver como ele se parece.
Então, este é o gatilho FlyInOut que eu defini aqui.
Agora, você está obviamente se perguntando,
como faço uso deste FlyInOut e, em seguida, aplicar
isso para rotear transições em meu aplicativo?
Então, para fazer isso, vamos para, primeiro,
começando com o arquivo component.ts menu.
Eu vou importar
o FlyInOut
da animação do aplicativo.
Então, indo para o componente,
Agora vou introduzir uma nova propriedade chamada como host.
Eu vou te dizer o que vai para o host em pouco tempo.
Em seguida, vamos também incluir a propriedade animações,
que é uma matriz aqui.
Então, aqui dentro, vou usar o FlyInOut que acabamos de importar.
Então, este gatilho de animação será aplicado para este componente de mídia.
Agora, dentro do host,
então é assim que eu assegurei que essa animação em particular aconteça quando ocorrerem alterações de rota.
Então, dentro deste host aqui,
Eu forneço isso como dizendo,
@flyInOut e dizer verdadeiro,
e isso deve ser incluído entre aspas também,
@flyInOut, true e, em seguida, style,
bloco de exibição.
Então, esses dois devem ser aplicados dentro da propriedade host aqui.
Agora, quando fizermos isso, meu componente de menu agora começará a animar
quando eu encaminhar para o componente de menu,
e depois também quando eu sair do componente de menu.
Agora, vou aplicar a mesma coisa para os componentes restantes da minha aplicação Angular.
Então, o que eu vou fazer é,
Eu vou apenas copiar isso,
e então vamos aplicar isso ao componente sobre.
Então, eu vou para o componente sobre.
Dentro do decorador componente,
Eu incluí as informações aqui,
e você vê a linha vermelha rabugenta que me lembra que eu preciso importar
FlyInOut de animações, animação aplicativo.
Então, a mesma abordagem, sobre componente,
então dentro do componente de contato também, a mesma coisa,
e, em seguida, aplicar o host e propriedades de animação para o decorador componente,
e então o que mais temos?
O componente inicial. Vamos para o componente doméstico e repetir a mesma coisa aqui.
Vou adicionar no host e a propriedade de animações,
e, em seguida, vá em frente e importe
FlyInOut, da animação do aplicativo.
Nós perdemos algum? Também precisamos atualizar o componente de detalhe do prato.
Então, deixe-me ir para o componente detalhe prato.
Como já temos a visibilidade lá,
Eu só vou importar o FlyInOut.
Então, já que já configuramos as partes restantes aqui,
Eu vou entrar e colar esse código,
e, obviamente, eu tenho duas animações aqui.
Deixe-me cortar a visibilidade daqui e, em seguida, adicionar
-lo na outra animação,
e, em seguida, cortar isso para que eu tenha única propriedade de animação com
tanto FlyInOut e funções de visibilidade tanto sendo incluído e chamado lá,
e, em seguida, a propriedade host.
Agora, vamos salvar as alterações e, em seguida, dar uma olhada em
a nova animação que acabamos de aplicar aos nossos componentes.
Começando com a vista inicial.
Então, temos a visão inicial sendo renderizada aqui.
Deixe-me agora ir rapidamente para a vista Sobre,
e, em seguida, você verá que a vista Sobre apenas desliza para dentro enquanto
a vista Início desliza para a tela aqui.
Da mesma forma, quando eu vou para o menu,
você verá que a exibição Menu desliza para dentro enquanto a exibição Sobre desliza para fora.
É tão rápido que você não percebe como tal.
Da mesma forma, para a vista Contato,
você vê a vista de contato deslizando para dentro.
Então, esse tipo de animação pode ser adicionado usando
esta abordagem que acabamos de ilustrar para sua aplicação Angular.
Ainda não terminamos. Faremos mais uma animação dentro da nossa aplicação.
Para ilustrar o que eu gostaria de fazer na próxima animação,
vamos dar uma olhada rápida no componente do menu.
Então, você vê que quando o componente de menu,
quando o girador está girando e, em seguida, é substituído pela vista,
a vista de repente aparece na tela,
e é um pouco chocante aos olhos.
Talvez você não perceba.
Você pode estar muito feliz com isso.
Mas podemos adicionar de uma forma de atenuação em
que a vista quando os dados são obtidos a partir do servidor e a vista está sendo renderizada em.
Então, quando a variável do prato no meu arquivo component.ts do menu fica não anulado,
então o girador será escondido e, em seguida, a vista do prato,
o menu é construído e, em seguida, colocado para fora.
Então, nós queremos que isso para facilitar na tela.
Então, vamos adicionar mais uma animação para efeito que ambos no componente de menu.
Também aplicaremos a mesma coisa no componente de detalhes do prato.
Também usaremos o mesmo no componente Início e no componente Sobre,
onde estamos obtendo os dados para mostrar a lista de líderes.
Então, onde quer que você esteja obtendo dados do servidor e, em seguida, colocando a vista,
quando a vista aparecer,
queremos facilitar a vista usando esta nova animação que eu vou criar em seguida.
Indo para o arquivo animation.ts app,
Eu vou adicionar em outra função aqui,
e deixe-me chamá-lo de expandir.
Esta função expandirá a vista que está sendo colocada
depois que os dados são obtidos do lado do servidor.
Então, esta vista, novamente,
Eu vou retornar um gatilho aqui.
Vou nomear o gatilho como expandir,
e este gatilho irá criar.
Como definimos este gatilho.
Então, dentro deste gatilho vamos incluir um estado com estrela lá dentro.
Então, não importa qual estado é.
Todos os estados serão renderizados com o estilo como
opacidade uma transformação traduzir x 0.
Então, ele é exibido à direita e centro no meu aplicativo.
Isso deve ser uma cinta lá.
Eu estava olhando para ele e disse,
Por que ele está mostrando uma linha vermelha rabiscada.
Então, quando você está digitando muito rápido você costuma cometer erros lá.
Então, em vez de um colchete quadrado,
que deveria ser uma cinta lá.
Então, esse é o estado.
Então, qualquer estado que será completamente visível e centrado onde deve ser centrado.
Agora, deixe-me ativar uma transição.
Agora, esta transição será acionada apenas
após o enter quando a vista for colocada na tela.
A parte de saída já estamos fazendo isso na animação de rota, então não precisamos disso.
Só precisamos do inter part para esta vista porque
a vista é renderizada nesta tela lá.
Então, no enter,
Eu vou definir a transição apropriadamente.
Então, na transição o que eu quero fazer?
Quero aplicar a mesma abordagem que usei com a transição enter aqui.
Então, eu vou apenas copiar isso e, em seguida, fazer alguns pequenos ajustes no código lá.
Então, para a transição enter aqui também,
Eu quero aplicar a mesma coisa.
Eu vou dizer traduzir Insta de 100 por cento.
Eu vou apenas usar 50 por cento e, em seguida, eu vou fazer a tradução Y.
Então, o que significa que esta visão vai cair do top 50 precent começando com
opacidade zero e então eu vou aliviá-lo em um pouco mais rápido tempo,
200 milissegundos e vai facilitar em nossa aplicação.
Agora, então, você vê o pequeno ajuste para o código aqui.
Então, traduzir menos 50 por cento e opacidade zero e
é aliviado em 200 milissegundos e, em seguida, nesse ponto,
eu posso aplicar este estilo como este mesmo estilo.
Vou me inscrever lá. Então, eu vou apenas copiar esse estilo e, em seguida, aplicar esse estilo lá.
Então, quando for facilitado,
ele entrará e será completamente visível onde deveria estar.
Então, esta é a função de expansão que eu defini aqui.
Então, onde eu quero fazer uso desta função?
Vamos primeiro para o componente de menu e dentro do componente de menu,
Eu vou agora também importar isso,
expandir e, em seguida, adicioná-lo em minhas animações e, em seguida, como faço para aplicar esta expansão?
Então, indo para esse arquivo de modelo de componentes do menu.
No arquivo de modelo,
Vou aplicar a expansão para
a lista de grade onde estou aplicando isso.
Então, deixe-me copiar isso e, em seguida, também vamos
para o componente de casa e dentro do componente de casa também,
Eu vou incluir a expansão e, em seguida, adicionar a expansão para a animação,
e, em seguida, ir para o arquivo de modelo de componentes de casa e então eu vou aplicar
que expandir para os componentes do prato cartão MD,
para os componentes de promoção cartão MD e também para o líder
componentes cartão MD aqui porque todos esses
três serão buscados no futuro do servidor e, em seguida, renderizados.
Então, os dados dos componentes do prato já estão sendo obtidos do servidor.
Agora, a mesma coisa vai para o componente DishDetail.
Eu vou adicionar na expansão para as importações e, em seguida, adicionar
uma expansão na animação indo para a exibição do componente DishDetail.
Junto com uma visibilidade,
Eu também vou aplicar a expandir para
o div cartão lá e, em seguida, para os comentários div também aqui.
Isso está no componente DishDetail.
O componente de contato não tem nada que está sendo obtido do servidor.
Então, eu vou apenas passar para o componente sobre e no componente sobre também,
Eu vou incluir a expansão e também nas animações.
Indo para o arquivo de modelo sobre componentes aqui este teste
aqui que mostra os líderes estão sendo obtidos do lado do servidor.
Então, eu vou aplicar a expansão sobre isso.
Vamos salvar as alterações e, em seguida, ir e dar
uma olhada em nossa aplicação angular no navegador.
Indo para a nossa aplicação angular.
Agora, quando você vai para o modelo inicial,
você pode ver que os cartões quando eles foram buscados,
eles deslizaram para a minha visão lá.
Agora, da mesma forma quando você vai para o componente sobre,
você vê que uma vez que os dados são obtidos do servidor,
então a renderização dos vários líderes está sendo
desliza sempre tão lentamente em posição nesta vista aqui.
Da mesma forma, indo para o componente menu,
veremos um mesmo comportamento aqui.
Assim, uma vez que os dados do menu estão prontos,
o componente do menu desliza para o lugar ali mesmo.
Mesma coisa com os componentes detalhe prato.
Então, deixe-me ir para o componente DishDetail e você verá que
a vista desliza no lugar lá, mas a
outra animação que estava
desaparecendo e reaparecendo essa parte ainda funciona exatamente como antes.
Então, você vê que nós introduzimos mais uma animação em nosso aplicativo Angular.
Agora, se você gosta disso ou você quer fazer uma maneira mais elaborada de fazer animações,
certamente, você pode enlouquecer com
fazendo muitos tipos diferentes de coisas com sua animação.
Alterando muitas propriedades diferentes dentro dos estilos como de que maneira você gosta e assim por diante.
Mas eu senti que algumas animações sutis aqui e ali vai
ajudar a melhorar a interface do usuário para minha aplicação angular.
Então, adicionei mais duas novas animações ao meu aplicativo Angular.
Com isso, completamos a segunda parte do nosso exercício de animações.
Espero que com estas duas partes de exercício,
você tenha entendido melhor sobre como fazer uso de animações
dentro da sua aplicação Angular.
Este é um bom momento para você fazer um commit git com a mensagem, animações parte dois.