Ich möchte eine kleine Animation auf dieser neuesten Website machen, an der ich gerade arbeite. Grundsätzlich brauche ich ein oder zwei divs / paragraph show / hide basierend auf onClick-Ereignis entweder Radio-Buttons gesetzt oder Kontrollkästchen (dann, wenn radio / check ist Wert A, zeigen div / p, wenn es B ist dann verstecken es)
Die Sache ist, dass das alles ist, was ich auf dieser speziellen Website javascript-ify möchte, so dass jQuery wie ein kleiner Overkill aussieht (selbst die verkleinerte Version)
Gibt es irgendeinen einfachen [ich kann das nicht genug betonen], um dies entweder durch vanilla Javascript oder eine andere minimale Bibliothek zu tun [nach der ich allgemein suche etwas & lt; 2kB für Ereignisse und wenig Animation (Höhe)]
Irgendwelche Ideen?
Danke!
Bearbeiten : Vielen Dank an alle, ich habe gerade gemerkt, dass einige der Dinge, die ich tun muss, über smart html + js erledigt werden können , dass es 30kB wert ist, einschließlich jQuery (noch mehr, wenn es bereits von CDN zwischengespeichert ist), also bleibe ich bei jQuery. Prost an alle:)
edit: JS + CSS3-Übergangsverfolgung Es funktioniert :) Ссылка
Die einzige Sache ist: wenn Höhe vorher nicht eingestellt wurde (dynamisch), wenn Sie es zum ersten Mal einstellen, wird der Hintergrund gedreht (geht von 0px Höhe).
Ich habe mein eigenes schnelles Skript entwickelt. Hier geht nichts:
%Vor% Dies wird "animieren" Element mit ID Div1 und Sie können die Geschwindigkeit steuern, indem Sie mit den zwei Zahlen oben spielen: größer Schritt bedeutet, dass größere Stücke jedes Mal und kleinere angezeigt werden Intervall bedeutet schnellere Animation.
Für diesen Code muss der folgende Stil auf das Element angewendet werden:
Und natürlich live Testfall: Ссылка
Es sollte auch ziemlich einfach sein, die Breite zu animieren (vielleicht sogar gleichzeitig), um einen "kühleren" Effekt zu erzielen. :)
Wenn Sie die Animation durch Aktualisieren der "Höhe" des Elements machen wollen, so dass es sich um einen "runtergleiten" (oder "nach oben" -Schlag) -Effekt handelt, sollte es nicht zu schwer sein. Du musst nur kleine Änderungen mit einem Timer machen.
%Vor%Das ist nur ein Beispiel; Sie könnten den Code mit einem Event-Handler oder was auch immer verbinden.
Für was es wert ist, hatte ich die gleiche Frage, aber wollte die Höhe des Elements haben, auch wenn es nicht im Stil eingestellt ist, und selbst wenn das Element display: none hat. Also ist meine Lösung, das Element zu stehlen, es unsichtbar zu machen, es irgendwo ungesehen zu platzieren, seine Anzeige zu machen: Blockieren, seine Höhe mit clientHeight messen, es wieder an seinen ursprünglichen Platz mit den ursprünglichen Einstellungen setzen und dann das Gleiten machen. Hier ist es:
%Vor%Ich denke, es lohnt sich, dies hier zu veröffentlichen, denn als ich nach meiner Antwort suchte, kam ich zu dieser Frage, brauchte aber nur ein paar Schritte mehr. Ich hoffe, das hilft jemandem.
Ich habe kürzlich eine Website konvertiert, um ihre Abhängigkeiten von jQuery zu entfernen, und sie verwendete fadeIn() und hide() für eine animierte "Tab-Seite" - wie UI - wo der Benutzer sofort auf die andere Registerkarte klicken würde verschwinden, während der neue Tab schnell eingeblendet wird.
Ich wollte vermeiden, dass ich selbst Animationen in Javascript mache, vor allem, da CSS3s Funktionen transition und animation jetzt gut unterstützt werden. Da diese Frage ursprünglich aus dem Jahr 2011 stammt, ging ich davon aus, dass es mit einem Update möglich wäre. Hier ist, was ich verwendet habe: keine jQuery und keine manuellen Animationen ( setInterval , setTimeout , requestAnimationFrame , etc):
Von diesem:
%Vor%(und ein 85 KB jQuery.min.js Download ...)
genau das:
%Vor%Und dieses CSS:
%Vor% Sie können CSS transition s nicht verwenden, da ein Übergang opacity immer dann blockiert wird, wenn die Eigenschaft display: geändert wird, aber CSS-Animationen unterstützen dies.
Dies kann verkürzt werden, indem die for(var... -Schleifen durch for(var e of... ersetzt werden, jedoch hat diese Art von Schleife noch keine breite Browser-Unterstützung (Stand Juni 2016).
Verwenden Sie die folgende Übergangsfunktion:
%Vor%Beispiel:
Manchmal benutze ich diese praktische Funktion im Gegensatz zu CSS-Transformationen, weil, ehrlich gesagt: CSS-Übergänge nicht ganz durchdacht sind. Ich sage nicht, dass CSS-Übergänge schlecht sind (ich benutze sie manchmal), alles was ich sage ist, dass es schwierig ist, sie überall zu verwenden. Es kann oft ziemlich schwierig sein, die OffsetWidth zu synchronisieren, um einen Reflow zu erzwingen, nur um dann mit einem Glitchy-Übergang zu enden, so dass man versucht, Timeout Offset-Dinge zu setzen, bis es unerträglich kompliziert wird, aber immer noch störend. Für was Sie Übergänge für verwenden, haben Sie möglicherweise dieses Problem nicht, aber für das, wofür ich sie verwende, habe ich dieses Problem. Was in der Spezifikation enthalten sein sollte, war eine Element.reflow() -Funktion, die einen Schritt weiter geht als nur void Element.offsetWidth und tatsächlich versucht, die Übergänge zu synchronisieren und "auszusortieren". Diese einzige Funktion hätte meinen Job als Entwickler 1000000000000000000000000% einfacher gemacht.
Tags und Links javascript