AnswerBun.com

Animações com angular: Como mover meu elemento inferior enquanto a escala reduz o tamanho do elemento acima?

Stack Overflow em Português Asked by veroneseComS on December 15, 2020

Possuo três cards e estou tentando aplicar uma animaton com scale() reduzindo e aumentando o tamanho do card quando o segundo cartão é exibido ou removido. Meu problema é que, quando removo o segundo elemento, meu terceiro elemento espera a animação do segundo card terminar para ocupar a posição do segundo card.

Isto é o que eu tentei:

animations: [
trigger(
  'scaleAnimation', [
    transition(':enter', [
      style({transform: 'scale(0)', opacity: 0}),
      animate('500ms', style({transform: 'scale(1)', opacity: 1}))
    ]),
    transition(':leave', [
      style({transform: 'scale(1)', opacity: 1}),
      animate('500ms', style({transform: 'scale(0)', opacity: 0}))
    ])
  ]
)

]

No meu template:

<div class="card">
    The first content
</div>

<div [@scaleAnimation] *ngIf="showSecondCard === true" class="card">
 The second content
  <button type="button" (click)="removeSecondCard()">Remove</button>
</div>

<div class="card">
  The third content
</div>

Stackblitz

Como posso fazer com que o terceiro elemento ocupe a posição do segundo elemento de forma gradativa enquanto a animação em escala do segundo elemento está em execução?
Tentei algumas alternativas setando o card como position: absolute mas não ficou como esperava.

Add your own answers!

Related Questions

EXCEL – VBA – SQL – Duvida na query usando CAST

0  Asked on November 30, 2021 by thiago

       

GIT error: pathspec ‘master’ did not match any file(s) known to git

4  Asked on November 30, 2021 by alessandra-burckhalter

 

(JAVASCRIPT) Como estilizar o layout desse código JS?

2  Asked on November 27, 2021 by user198468

         

Background gradient se repetindo

4  Asked on November 27, 2021 by user96296

   

Como ter um intervalo de ciclo, até n e até

2  Asked on November 27, 2021 by bruno-bacelar

   

O que seria esse “k_BackingField”

2  Asked on November 27, 2021 by willian

     

Converter double para string mantendo o mesmo formato

1  Asked on November 27, 2021 by mik3i4a5

     

upload com ajax e formdata exibe erro

2  Asked on November 27, 2021

     

Flutter – Como alterar o tamanho de um TextField corretamente?

2  Asked on November 27, 2021 by jonas-ferreira

         

Como automatizar a criação de planilhas excel em R

0  Asked on November 27, 2021 by exartt

 

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir