Meteor: Animiert (Ein-/Ausblenden) Dynamische Vorlagendaten

Question

In meiner Meteor-Vorlage verwende ich each, um über eine Hilfsfeldvariable namens asks zu iterieren, deren Array-Inhalt sich dynamisch ändert. Dies wird in Meteor korrekt angezeigt, es gibt jedoch standardmäßig keine Animation. Die Änderungen sind plötzlich, so dass es schwierig ist, genau zu sehen, was sich wann ändert. Ich möchte diese Datenänderungen in der Vorlage animieren. Wenn asks[1] gleich ist, nichts tun. Wenn sich jedoch asks[2] geändert hat, fade die alten <tr> für asks[2] aus und füge die neuen <tr> mit den neuen Werten asks[2] ein. Wie kann dies erreicht werden? Vielen Dank!

{{#each asks}} 
    <tr class="ask"> 
    <td>{{price}}</td> 
    <td>{{amount}}</td> 
    </tr> 
{{/each}} 

Answer 1

die _uihooks verwenden - hier ist ein großer Artikel beschreibt es: http://www.webtempest.com/meteorjs-animation

Answer 2

Auch kann dieses Paket hilfreich sein: https://github.com/gwendall/meteor-template-animations Es ist DOM basiert und intern verwendet uiHooks, aber einfacher zu bedienen.

Answer 3

Eine weitere Option für Animationen, die Animate.css importiert, finden Sie hier https://github.com/webtempest/meteor-animate.