CSS Animation: Anzahl Inkrement-Effekt
Ich bin zu wollen, um die animation Effekt, wenn die zahlen sich schnell ändern, Beispiel: http://jsbin.com/kevalutupe/1/
Ich bin zu wollen tun Sie dies, CSS allein (ich weiß, wie ich es code in JS), ich will nicht von JS, da ich das Gefühl hämmern der DOM ist nicht die beste Lösung. Ist dies überhaupt möglich mit CSS?
Ich bin nicht viel Aufhebens um die zahlen tatsächlich Inkrementieren richtig, ich bin nur nach der Wirkung.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die Anzahl spinning-Effekt ist definitiv möglich mit CSS3-Animationen und was ist besser, Sie können auch die end-point mit einem kleinen bisschen JS und tatsächlich erhalten die ganze Funktionalität.
Methode Erklärung:
div
erstellt wird, so dass es immer nur eine Zahl, durch festlegen der Höhe und Breite 1em. Überlauf desdiv
ist ausgeblendet, so dass nur noch eine Linie sichtbar.div
einespan
enthält alle zahlen von 1 bis 0 wird erzeugt und positioniert ist, relativ zu den Eltern.span
ist auf 0px 0em oder aber während deranimation
die top-position so verändert, dass diespan
macht den Eindruck nach oben verschoben. Da diediv
kann die Anzeige nur eine Zahl in einer Zeit, gibt es die spinning-Effekt (oder die Wirkung der anderen zahlen verschwinden).span
Elemente. 0em bedeutet die 1. Zeile sichtbar ist (Nummer 1), -2em bedeutet die Dritte Zeile sichtbar wird (Zahl 3) und so weiter.Hinweis: Mit dieser Methode die spin Aussehen wird, gehen den ganzen Kreis jeder-Zeit und nicht wie das JSBin-Beispiel in Frage, wo eine 3-bis 4-für die erste Ziffer wäre nur ein einziger Schritt, und nicht zu einem vollen Kreis.
CSS:
HTML:
Das unten ist ein Beispiel mit JavaScript, wo die animation Effekt wird erreicht durch CSS, aber das auslösen der animation und die Einstellung der Endpunkt ist erreicht mit JavaScript.
Den JS code ist ziemlich selbsterklärend. Alles, was wir tun, ist die folgende:
animate
Klasse allespan
Elemente, die Teil dieser animation-Effekt. Das ist, weil wir möchten, dass die animation nur geschehen, wenn die Schaltfläche geklickt wird.top
Eigenschaft jedesspan
um einige Zufallszahlen. Dies würde bedeuten, dass jeder span wird eine andere Nummer angezeigt.animate
Klasse, so dass, wenn wir die Schaltfläche erneut klicken, wird die animation wieder von vorn beginnen.JS:
CSS:
HTML:
Version 2: (mit nur einer Zahl Inkrement-Effekt statt eines spinning-Effekt)
Dieser wird erstellt mit weitgehend den gleichen code wie die vorherigen, aber im Gegensatz zu den vorherigen, wo die
animation
macht die Bewegung von einer Nummer zur anderen eine allmähliche (und damit die Herstellung einer spin-Effekt), hier die animation macht die Bewegung mehr wie ein plötzlicher Sprung von einer Nummer zur anderen und erzeugt dadurch nur ein Inkrement-Effekt.Dem Klick wird erreicht durch die Aufrechterhaltung der
top
position dieselbe, bis seiner nur um Zeit, um zum nächsten zu bewegen (das heißt, dietop
ist0em
bis 9,9% für die animation, aber bei 10% es änderungen plötzlich zu-1em
).JS:
CSS:
HTML: