[MÚSICA]
Como aprendemos na palestra anterior,
animações adicionam muito valor intrínseco à sua aplicação.
Ele acrescenta a uma melhor experiência de usuário.
Agora, obviamente, isso não significa que você jogue animações por todo o lugar
apenas por causa de fazer animações.
Você coloca animações no lugar para melhorar a experiência do usuário.
Neste exercício vamos fazer a nossa primeira animação
dentro da nossa aplicação Angular que desenvolvemos até agora.
E ao longo do caminho,
aprende como animações podem ser implementadas em um aplicativo Angular.
Continuaremos este tópico na segunda parte do exercício onde
adicionaremos mais animação à nossa aplicação Angular.
Quando começamos este curso, no primeiro exercício com Angular,
já tínhamos adicionado no módulo de animação em nosso aplicativo Angular
no app.module.ts5, então importamos o módulo de animação ali mesmo.
Agora, o próximo passo é ir para os componentes e
, em seguida, adicionar a animação onde quer que seja necessário.
A primeira animação que vamos adicionar está no componente dishdetail aqui.
Então, indo para o componente dishdetail,
deixe-me importar algumas classes aqui.
Vou importar gatilho, estado, estilo
, animação e transição de.
@angular /animações.
Agora, uma vez que importamos estes podemos fazer uso deles na construção de nossa animação.
Então, como você adiciona animação a um componente?
Vamos adicionar os gatilhos de animação no decorador componente aqui.
Então, indo para o decorador componente após os URLs estilos,
e adicione as animações como uma propriedade dentro de lá.
E então aqui, eu vou definir um gatilho,
que eu chamo de gatilho de visibilidade, e
eu vou definir o gatilho de visibilidade aqui dentro.
Agora para este gatilho visibilidade,
Vou definir dois estados, Vou definir um estado
como mostrado e vou definir um segundo estado
como, Oculto.
Então eu tenho a flexibilidade de definir meus estados assim.
Então, para o estado mostrado, o que é que eu quero aplicar?
Então, para o estado mostrado, vou aplicar o estilo da seguinte forma,
assim os estilos que eu vou aplicar para
o estado mostrado, eu vou fazer transformar, e
a transformação que eu vou aplicar é uma escala de 1.0.
Então eu quero mostrá-lo em
seu tamanho normal e
uma opacidade de 0.
Então é assim que eu defino o estilo mostrado.
Então, e o estado oculto eu definir o estilo como,
Transformar, vou dizer escala (0.5).
Você pode brincar com esses números
para ver se a animação é o que você deseja.
Eu também brinquei com esses números até que eu tenho algo que eu estava
satisfeito com.
E 0, ou para o seu estado mostrado, vou colocar a opacidade como 1.
Opacidade 1 significa que está completamente visível.
Opacidade 0 significa que está completamente oculto.
Agora, eu defini dois estados aqui, mostrado e aqui no estado.
Agora, a transição entre esses dois estados,
Eu vou definir aqui como, sempre que eu mudo de qualquer estado para qualquer estado,
não importa qual estado para qual estado eu me movo,
a transformação é feita com animação de 0,5 segundos,
ou 500 milissegundos.
E eu vou facilitar para fora.
Então aqui, o que eu estou especificando é que se eu passar do estado mostrado para o estado oculto ou
do estado oculto para o estado mostrado, eu vou me mover dentro de 0,5 segundos, ou 500 milissegundos.
E então, eu vou fazer a transição facilitando para dentro e para fora, então
não será uma transição linear, vai ser lentamente entrando e
em seguida, facilitar e depois facilitar a transição, então
que não será uma transição seca de um para o outro.
Assim, você pode usar essa facilidade de entrada ou facilidade de saída
para especificar como você deseja que a transição aconteça.
Então, agora para essa animação, eu especifiquei
a visibilidade como o gatilho para essa animação.
Agora, para permitir que esta animação funcione corretamente,
Vou entrar no meu DishDetailComponent e, em seguida, especificarei,
dentro deste componente, o valor inicial para visibilidade.
Então, eu vou dizer visibilidade é
inicialmente definido para mostrado, e então,
sempre que eu estou mudando de um prato para outro.
E isso acontece sempre que estou pegando o prato aqui.
Então, sempre que eu estou mudando o prato de um prato para o outro,
isso é causado sempre que o parâmetro de rota muda.
Então, nesse ponto, eu vou aplicar a animação.
Vou fazer o gatilho ir de mostrado para o estado oculto e
depois voltar de oculto para o estado mostrado quando o prato estiver disponível.
Então, para aplicar essa transformação.
Então eu vou colocar esta declaração dentro
um bloco aqui nesta função de seta.
E, em seguida, também definir esta visibilidade aqui como.
Então, quando eu estou fazendo a transição de um estado para outro, então
quando eu começar a buscar a informação do prato do lado do servidor,
Eu vou primeiro esconder o prato atual definindo o valor de visibilidade
para oculto, o que significa que o prato atual que
está sendo exibido será escondido da vista.
E então, quando o novo prato ficar disponível, ele vai aparecer de volta para a vista.
Então, para fazer isso, quando meu prato ficar disponível na segunda parte,
na parte de assinatura, vou dizer como a última declaração nesse bloco,
Eu vou dizer que essa visibilidade é igual a mostrada aqui.
Então minha visão se torna visível nesse ponto.
Agora eu não estou aplicando isso para a mensagem de erro porque eu estou
vai aplicar essa visibilidade apenas para as partes do meu template
onde meu prato está realmente sendo mostrado.
Agora, se houver um erro, então eu só quero esconder o prato correto.
Em seguida, mostre apenas a mensagem de erro na exibição lá.
Então, com essas alterações para meu DishDetailComponent.
Então, você pode ver novamente, explicando isso nele mais uma vez.
Quando eu começar a buscar o novo prato após a mudança dos parâmetros da rota,
Eu vou definir a visibilidade para oculto para
que o prato atual que está sendo exibido na vista vai se esconder.
E então, quando o novo prato fica disponível, de modo que vai acontecer quando
a assinatura é chamada quando esse observável fica disponível.
E então, quando o prato fica disponível e, em seguida,
Eu coloquei este prato para o prato que voltou do observável.
Nesse ponto, restaurarei a visibilidade para esse estado mostrado.
Então, que o meu novo prato que eu busquei pode ser mostrado na tela.
Com esta mudança, eu agora vou para o arquivo de modelo,
e dentro do arquivo de modelo eu vou aplicar
a visibilidade para ambos o prato aqui.
Então, a primeira div onde eu estou exibindo o prato eu vou
aplicar o, gatilho visibilidade para o prato.
E então eu vou definir que igual a,
Visibilidade, que é a variável que eu defini no código lá.
Agora, Eu aplico isso ao prato aqui, e também aplicar a mesma coisa
para a segunda div, onde eu estou exibindo os comentários.
E é isso.
Então deixe-me salvar todas as alterações, e então vamos e
dar uma olhada em como essa animação funciona em nosso exemplo.
Indo para o navegador, agora estou exibindo o menu.
Deixe-me selecionar um dos pratos e, em seguida, passar para a vista dos pratos aqui.
Então, quando o prato é exibido, observe que a qualquer momento eu movo de
este prato para o próximo prato, então clicando à direita.
Então esse prato desaparece, e então quando o novo prato fica disponível,
a vista novamente se torna visível e, em seguida, o novo prato é mostrado.
Da mesma forma, eu posso fazer mais um e, em seguida, notar que o novo prato,
assim que a informação se torna disponível, torna-se novamente visível.
Então esta é a transição que estou aplicando neste exemplo aqui.
Então, voltando, você pode ver o mesmo comportamento novamente se repetindo.
Esta pequena alteração de interface de usuário
adiciona muito valor à maneira como o usuário percebe seu aplicativo.
Como você percebe, isso não adiciona muito à funcionalidade do seu aplicativo
em si, mas contribui para uma melhor experiência de usuário.
E é aí que aplicamos animações judiciosamente dentro do nosso aplicativo
para tornar certa experiência do usuário mais significativa
para o usuário que está visualizando seu aplicativo Angular, ou
visualizando seu aplicativo móvel, que veremos nos cursos posteriores.
Isso conclui este exercício em animações.
Continuaremos as explorações de animações na segunda parte
do exercício que surge logo depois disso.
Este é um bom momento para você fazer um comentário do Git com as animações de mensagem,
parte um.
[MÚSICA]