Animieren von Kindelement mit ngAnimate und animate.css

Ich habe eine App, die Angular 1.5 verwendet, und ich benutze ngAnimate und animate.css, um einfache Animationen zu behandeln. Ich stoße auf ein Problem, bei dem ich ein untergeordnetes Element animieren muss, und ng-enter/leave wird über ng-if auf das übergeordnete Element angewendet.Animieren von Kindelement mit ngAnimate und animate.css

Hier ist mein Markup:

<div class="parent" ng-if="vm.showPanel"> 
    <div class="child animated"> <!--This is the element that need the animation--> 
    some content 
    </div> 
</div>

Hier ist die CSS ist:

.parent.ng-enter > div.child{ 
    animation: bounceInRight 1s; 
} 
.parent.ng-leave > div.child{ 
    animation: bounceOutRight 1s; 
}

Wenn ich die Animation auf das Element übergeordnete Anwendung funktioniert es ganz gut, aber ich brauche es in diesem Kind-Element . Irgendwelche Vorschläge?? Ich weiß, das muss etwas ziemlich Einfaches sein, aber ich bin mir nicht sicher, was ich vermisse. Danke im voraus, Jungs.

Quelle

2016-08-10 Daniel Perez

haben Sie sah [ 'ng-belebtes-Kinder = "true"'] (https://code.angularjs.org/1.5.8/docs/api/ngAnimate/directive/ngAnimateChildren)? – plong0

@ plong0 Ich versuchte dies, aber kein Glück:/ –

Ich denke, es würde nur funktionieren, wenn der Elternteil animiert wird. Denken Sie daran, wie ngAnimate das DOM-Element hält, wenn ng-if es entfernt. Ohne dass der Elternteil an Ort und Stelle bleibt (dh durch Animation), würde das Kind damit verschwinden.

Verwenden Sie ng-animate-children="true" und fügen Sie dem Elternteil eine Art Dummy-Animation hinzu, damit das Kind lange genug bleiben kann, um animiert zu werden.

Wenn Sie andere Kinder unter Eltern haben, die Sie verschwinden wollen/wieder sofort, wie einige weitere CSS-Regeln hinzufügen:

.parent.ng-leave > .other-child { 
    display: none; 
    visibility: hidden; 
}

Quelle

2016-08-10 16:02:48 plong0

Hinzufügen einer Animation zum Elternelement hat den Trick, Sie waren völlig richtig, es ging alles um Timing ... Das Elternteil im DOM mit einer FadeIn/Out-Animation erlaubt mir um dann die Animation, die ich wollte, auf das Kindelement anzuwenden. Vielen Dank!! –

Für alle in der gleichen Ausgabe läuft, war die Lösung alles um Timing hatte ich Um eine Animation auf das übergeordnete Element anzuwenden, konnte ngAnimate es im DOM behalten und nicht zusammen mit seinen untergeordneten Elementen entfernen (siehe https://stackoverflow.com/a/38878432/6301843).

Die css endete wie folgt aussehen:

.parent.ng-enter { 
    animation: fadeIn 800ms; 
} 
.parent.ng-leave { 
    animation: fadeOut 800ms; 
} 
.parent.ng-enter > div.child { 
    animation: bounceInRight 1s; 
} 
.parent.ng-leave > div.child { 
    animation: bounceOutRight 1s; 
}

Auch müssen Sie diese ng-belebtes-Kinder = "true" zu Ihrem Markup hinzuzufügen. Also meine HTML endete wie folgt aussehen:

<div ng-if="vm.someConditional" ng-animate-children="true" class="parent"> 
    <div class="child">Content</div> 
</div>

Quelle

2016-08-11 12:37:30

Animieren von Kindelement mit ngAnimate und animate.css

Antwort

Verwandte Themen