Ng-show DOM Opazitätsanimation tauschen

Question

Ich habe ein kleines Problem bei der Animation auf ngShow.

Ich habe 2 DOM-Elemente, eins ist sichtbar, bis die Var ändert und mit dem anderen zu tauschen.

<card-view ng-show="enemy[3] !== null" name="enemy[3].Name" img="enemy[3].ImageUrl" atk="enemy[3].Atk" def="enemy[3].Def" life="enemy[3].Life" 
         cat="enemy[3].Category" tier="enemy[3].Tier" elem="enemy[3].ElementId.ElementId" desc="" ng-click="performAttack(3)"></card-view> 
      <div class="battle-no-card" ng-show="enemy[3] === null"></div> 

Das Problem ist: während die Animation durchführt, wird das zweite Element auf der rechten Seite vor dem ersten verschwindet.

Wie kann ich vermeiden, dass das zweite Element erscheint, bevor das erste vollständig verblasst ist.

Danke :)

UPDATE:

Nevermind. Ich habe die Antwort bekommen. Verkapseln Sie einfach die beiden Elemente in einem Div und machen Sie beide absolute Position, also überlappen Sie einander und ich kann die Animation erstellen.

Answer 1

So kann ng-show eine Funktion annehmen, die true oder false zurückgibt, um auszulösen.

Nur die Show-Funktion, die Sie rendern möchten, rufen Sie zuerst die Show-Funktion in dem Element, das Sie rendern möchten, zweitens, und Sie sollten den Effekt haben, den Sie suchen.