Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Observei alguns probleminhas na animação

Referente ao curso Angular: aprimore suas técnicas de animação e crie interfaces ainda mais atraentes, no capítulo Carregando a lista de forma animada e atividade Desafio: vamos animar o Buscante!

por MARCUS ANTONIO MARTINHO E SILVA
| 134.7k xp | 67 posts
Analista Judiciário

Consegui fazer algo parecido, mas, sem o BIND [@listState], apenas com o @listState na div container-card, visto que, o ":enter" já dá conta de disparar a animação, não sendo necessário consultar o retorno do Observable. Entretando, tanto com o BIND, quanto sem BIND:

  1. Os 2 query dão match em tudo que sai/entra, quando estes saem/entram 100%. Se tento fazer uma nova consulta, com algo "distinctUntilChanged" do anterior, a animação não é disparada;
  2. O ng-template também é "animado", e aparece quando saem os cards;
  3. O query não "consulta" em níveis aninhados? Entendi que não, pois quando coloco ".card:leave" (que está há um DIV aninhado), a animação não dispara.
1 resposta
solução!
por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Opa Marcus, tudo certo?

Em relação as suas dúvidas:

  1. Pelo que foi descrito do comportamento, parece que o problema está relacionado à lógica do código. Sugiro verificar se a condição de disparo da animação está ocorrendo corretamente, além de verificar se o "distinctUntilChanged" está sendo aplicado corretamente e se a condição de disparo da animação está sendo satisfeita.
  2. Quanto ao ng-template estar sendo animado e aparecer na saída dos cards, isso deve estar ocorrendo por conta dele também estar sendo considerado na animação aplicada aos cards. Verifique se você está aplicando a animação apenas aos elementos desejados e se o ng-template não está sendo incluído na animação.
  3. O Angular não lida com consultas de dados por padrão. Para fazer a consulta em um nível aninhado, seria necessário especificar o seletor completo do elemento desejado.

Ademais, deixo abaixo como indicação de leitura a documentação do Angular Animations para revisar seletores, condições e parâmetros de animação com cuidado:

Fico à disposição.

Tenha um bom dia e bons estudos.