Erstellen Sie segmentierte Control-like mit Animation
Ich habe eine ziemlich einfache, segmentierte Controller-ähnliche Radio-Button-Einrichtung. Wenn ein Optionsfeld ausgewählt wird, wird auf diese Schaltfläche eine Hintergrundfarbe angewendet.
Wie kann ich die Hintergrundfarbe auf das ausgewählte Optionsfeld in css animieren?
So:
Aktualisieren
Wegen des Mangels an Antworten bin ich jetzt offen für JavaScript / JQuery. Obwohl, wenn Sie eine reine CSS-Lösung haben, bitte posten Sie es.
5 Antworten
Ok, Pure CSS, scheint, dass ich spät zurückkam, immer noch besser als nicht zurück zu kommen JS Fiddle - Aktualisiert (1) (2)
Aktualisierter Code : hinzugefügt z-index value zum Container div#radios (3)
Bearbeiten:
(1) Für kleinere Bildschirme können Sie eine Medienabfrage mit einem bestimmten Unterbrechungspunkt machen, wenn diese Radios unten vertikal angezeigt werden und statt translateX() translateY() verwenden.
(2) Meine Lösung unten fügt ein div <div id="bckgrnd"></div> als letztes Kind des Containers #radios div hinzu, das Sie stattdessen mit javascript / jquery hinzufügen können, um dies zu tun jquery: JS Fiddle 2 - Aktualisiert
(3) Der Wert z-index:; wurde hinzugefügt, um sicherzustellen, dass #bckgrnd - die z-index:-1 hat, nicht hinter der body verschwindet oder welches Element auch immer die #radios enthält div. So können wir jetzt ein Hintergrundbild für den Körper und eine Hintergrundfarbe für ein Container-Div festlegen, ohne sich darum zu kümmern. < em> Teste JS Fiddle
Wahrscheinlich werden einige Verbesserungen nötig sein, um richtig auszusehen, aber die allgemeine Idee ist hier:
Das eingebaute Snippet-Ding macht es glatter, als es wirklich ist, es ist besser in der Geige: Ссылка
Hier ist eine Version, die JQuery verwendet. Es ist ein wenig komplexer als die anderen Antworten, aber die meiste Komplexität liegt an der Art, wie ich die Animation gemacht habe. Wenn sich das Highlight ändert, wird es an die neue Position verschoben und dann verkleinert. Dies ist nicht, was Ihr Modell tut, aber IMHO ist es ein glatterer Effekt.
Es ist schwer zu erklären, aber es ist eine JSFiddle, die zeigt, was ich meine.
Der HTML-Code ist bis auf die hinzugefügte Hervorhebung fast identisch mit der Ihren:
%Vor%JS:
%Vor%Die wichtigsten CSS-Stile sind diejenigen, die den Übergang mit den richtigen Beschleunigungs- und Verzögerungswerten anwenden:
%Vor%Der Kern davon ist, dass hinter den Labels ein "Highlight" steht. Wenn Sie auf eins klicken, berechnet es die Position des angeklickten Objekts und durch Hinzufügen von Klassen, um die richtige Animation zur richtigen Zeit anzuwenden, erhalten Sie das korrekte animierte "Morphing"
Tags und Links javascript html jquery css css-animations