Animieren Grenze

0
8

Übergang Grenze für einen hover-Zustand. Einfach, Recht? Sie könnten unangenehm überrascht werden.

Die Herausforderung

Die Herausforderung ist einfach: erstellen einer Schaltfläche mit einer Ausweitung der Grenze auf hover.

Dieser Artikel konzentriert sich auf echte CSS-tricks, das wäre einfach zu drop in ein Projekt, ohne zu berühren, den DOM oder JavaScript verwenden. Die Methoden, die hier behandelt wird, Folgen Sie diese Regeln

  • Einzelnes element, kein Helfer divs, aber Pseudo-Elemente sind erlaubt)
  • Nur CSS (kein JavaScript)
  • Funktioniert für jede Größe (nicht eingeschränkt auf eine bestimmte Breite, Höhe und Seitenverhältnis)
  • Transparente Hintergründe unterstützt
  • Smooth und performant übergang

Ich schlug vor diese Herausforderung in der Animation bei der Arbeit Locker wieder auf . Obwohl es keinen Konsens über den besten Ansatz, ich habe einige wirklich gute Ideen, die durch einige phänomenale Entwickler.

Methode 1: Animation Grenze

Der einfachste Weg, um zu animieren, eine Grenze ist… naja, durch die Animation Grenze.

.Grenze-button {
border: solid 5px #FC5185;
transition: border-width 0.6 s linear;
}

.Grenze-button:hover { border-width: 10px; }

Finden Sie die Stift-CSS schreiben-Modus-experiment von Shaw (@shshaw) auf CodePen.

Schön und einfach, aber es gibt einige große performance-Probleme.

Da border nimmt Platz in der Dokument-layout, ändern der border-width wird der trigger-layout. In der Nähe werden Elemente nicht verschieben, weil die neue Grenze der Größe, so dass browser positionieren die Elemente jedes frame der animation, es sei denn, Sie legen eine explizite Größe, auf die Schaltfläche.

Als ob die Auslösung layout war nicht schlecht genug, der übergang selbst fühlt sich “getreten”. Ich werde Ihnen zeigen, warum Sie im nächsten Beispiel.

Methode 2: Bessere Rahmen mit Kontur

Wie können wir die Grenze, ohne dass das layout? Durch die Verwendung von outline statt! Du bist wahrscheinlich am meisten vertraut mit Gliederung aus, entfernen Sie es auf :focus styles (obwohl Sie nicht sollte), aber der Umriss ist die äußere Linie nicht ändern, dass ein element die Größe und position im layout.

.Grenze-button {
outline: 5px solid #FC5185;
übergang: Gliederung 0.6 s linear;
margin: 0.5 em; /* Erhöhung der Marge, da die Gliederung erweitert, die außerhalb des Elements */
}

.Grenze-button:hover { outline-width: 10px; }

Ein quick-check-in Dev-Tools “der Registerkarte” Leistung ” zeigt die Gliederung transition keinen trigger-layout. Egal, die Bewegung scheint noch immer trat, da Browser Runden die border-Breite und Kontur-Breite-Werte, so dass Sie nicht bekommen, die sub-pixel-rendering-zwischen 5 und 6 oder fließende übergänge von 5.4 auf 5.5.

Seltsam, Safari oft nicht wiedergegeben wird der Umriss übergang und gelegentlich verlässt verrückt Artefakte.

Methode 3: Schneiden Sie es mit der clip-Pfad

Erstmals umgesetzt von Steve Gardner, der diese Methode verwendet, clip-path mit calc zu trimmen Sie den Rand nach unten so auf hover können wir den übergang, um den vollen Grenze.

.Grenze-button {
/* Volle Breite Rahmen und einen clip-Pfad visuell schneiden Sie es nach unten auf die Start-Größe */
border: solid 10px #FC5185;
clip-path: polygon(
calc(0% + 5px) calc(0% + 5px), /* Links oben */
calc(100% – 5px) calc(0% + 5px), /* oben rechts */
calc(100% – 5px) calc(100% – 5px), /* rechts unten */
calc(0% + 5px) calc(100% – 5px) /* unten Links */
);
übergang: clip-path 0.6 s linear;
}

.Grenze-button:hover {
/* Clip-Pfad über dem gesamten Feld, so es ist nicht mehr verstecken die gesamte Breite Grenze. */
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

clip-path-Technik ist die glatte und die meisten performante Methode so weit, aber kommt mit ein paar Vorsichtsmaßnahmen. Rundungsfehler führen kann, einen kleinen Unebenheiten, abhängig von der genauen Größe. Die Grenze hat auch in Originalgröße von Anfang an, die die genaue Positionierung knifflig werden.

Leider gibt es keine IE/Edge-Unterstützung noch, aber es scheint zu sein in der Entwicklung. Sie kann und sollte dazu beitragen, Microsofts team für die Durchführung dieser Funktionen durch Abstimmung für Masken – /clip-path Hinzugefügt werden.

Methode 4: linear-gradient background

Wir können simulieren, eine Grenze durch eine geschickte Kombination mehrerer linear-gradient Hintergründe richtig dimensioniert. Insgesamt haben wir vier separate Verläufe, eine für jede Seite. Die background-position und background-size Eigenschaften, die sich jeder Steigung an der richtigen Stelle und in der richtigen Größe, die dann umgestellt werden, um die Grenze zu erweitern.

.Grenze-button {
background-repeat: no-repeat;

/* background-size Werte werden wiederholt, so dass wir nur deklarieren müssen, Sie einmal */
background-size:
calc(100% – 10px) 5px, /* oben & unten */
5px calc(100% – 10px); /* rechts & Links */

background-position:
5px 5px, /* oben */
calc(100% – 5px) 5px, /* rechts */
5px calc(100% – 5px), /* unten */
5px 5px; /* Links */

/* Da wir Größe und Position mit den oben genannten Eigenschaften, benötigen wir nur eine einfache einfarbige Farbverläufe für jede Seite */
background-image:
linear-gradient(0deg, #FC5185, #FC5185),
linear-gradient(0deg, #FC5185, #FC5185),
linear-gradient(0deg, #FC5185, #FC5185),
linear-gradient(0deg, #FC5185, #FC5185);

transition: all 0.6 s linear;
transition-property: background-size, background-position;
}

.Grenze-button:hover {
background-position: 0 0, 100% 0, 0 100%, 0 0;
background-size: 100% 10px, 10px 100%, 100% 10px, 10px 100%;
}

Diese Methode ist sehr schwierig und hat sehr wenige cross-browser-Unterschiede. Firefox und Safari animieren, den faux-Grenze reibungslos, genau die Wirkung, die wir suchen. Chrome die Animationen ruckelig und noch mehr trat, als die Gliederungs-und die Grenze übergänge. IE und Edge verweigern, animiert hintergrund, aber Sie geben die richtige Grenze expansion Wirkung.

Methode 5: Fake it mit box-shadow

Versteckt in box-shadow ‘ s-spec ist ein vierter Wert für spread-radius. Alle anderen Länge Werte auf 0px und verwenden die spread-radius-zu-bauen Sie Ihre Grenze alternative, die, wie Umriss, die nicht auf das layout auswirken.

.Grenze-button {
box-shadow: 0px 0px 0px 5px #FC5185;
transition: box-shadow 0.6 s linear;
margin: 0.5 em; /* Erhöhung der Marge, da die box-shado dehnt sich außerhalb des Elements, wie der Umriss */
}

.Grenze-button:hover { box-shadow: 0px 0px 0px 10px #FC5185; }

Der übergang von der box-shadow ist ausreichend performant und fühlt sich viel glatter, außer in Safari, wo es einrasten ganze-Werte während des übergangs wie border und outline.

Pseudo-Elemente

Einige dieser Techniken können geändert werden, um ein pseudo-element anstelle, aber pseudo-Elemente endete, dass einige zusätzliche performance-Probleme bei meinen tests.

Für die box-shadow-Methode, den übergang gelegentlich ausgelöst malen in einem viel größeren Bereich als notwendig. Reinier Kaper hingewiesen wird, dass ein pseudo-element kann helfen, isolieren die Farbe für einen spezifischen Bereich. Als ich lief weiter tests, box-shadow war nicht mehr zu malen in großen Bereichen des Dokuments und der Komplikation der pseudo-element endete als weniger performant. Die änderung in der Farbe und Leistung kann schon durch ein Chrome-update, so fühlen sich frei, um zu testen, für sich selbst.

Ich könnte auch nicht einen Weg finden, zu nutzen, pseudo-Elemente in einer Weise, die erlauben würde, für transform-basierten animation.

Warum nicht transformieren: skalieren?

Sie können brennen bis zu hilfreichen empfehlen die Verwendung von transform: Skala für diese. Seit transformieren und die Deckkraft sind die besten style-Eigenschaften zu animieren, für Leistung, warum nicht ein pseudo-element und die Grenze scale up & down?

.Grenze-button {
position: relative;
margin: 0.5 em;
border: solid 5px transparent;
background: #3E4377;
}

.Grenze-button:after {
Inhalt: “;
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: solid 10px #FC5185;
margin: -15px;
z-index: -1;
transition: transform 0.6 s linear;
transform: scale(0.97, 0.93);
}

.Grenze-button:hover::after { transform: scale(1,1); }

Es gibt ein paar Probleme:

  1. Die Grenze wird durch eine transparente Schaltfläche. Ich gezwungen, einen hintergrund auf die Schaltfläche, um zu zeigen, wie die Grenze versteckt sich hinter der Schaltfläche. Wenn Ihr design fordert Tasten mit einem vollen hintergrund, dann könnte das funktionieren.
  2. Sie können nicht Maßstab der Grenze zu bestimmten Größen. Da der button Abmessungen variieren mit dem text, es gibt keine Möglichkeit, Sie zu animieren, die Grenze von genau 5px, 10px, die nur mithilfe von CSS. In diesem Beispiel habe ich schon einige magic-zahlen auf der Skala, um es zu bekommen zu kommen, aber das wird nicht universell sein.
  3. Die Grenze animiert ungleichmäßig, weil die Taste, das Seitenverhältnis nicht 1:1. Dies bedeutet in der Regel die linken/rechten Seite erscheinen größer als oben/unten, bis die animation abgeschlossen ist. Dies kann nicht ein Problem sein, je nachdem, wie schnell Ihr übergang ist die Taste, das Seitenverhältnis, und wie groß Ihre Grenze ist.

Wenn Sie Ihre Schaltfläche gesetzt hat Dimensionen, Cher wies darauf hin, ein cleverer Weg, um zu berechnen die exakte Waage benötigt, obwohl es sein kann, vorbehaltlich von Rundungsfehlern.

Über CSS

Wenn wir lösen unsere Regeln ein wenig, es gibt viele interessante Möglichkeiten, die Sie animieren können Grenzen. Codrops konsequent macht hervorragende Arbeit in diesem Bereich, meist unter Verwendung SVGs und JavaScript. Die Ergebnisse sind sehr zufriedenstellend, obwohl Sie sein kann ein bisschen kompliziert zu implementieren. Hier sind ein paar heraus zu überprüfen:

  • Kreative Buttons
  • Button-Stile Inspiration
  • Animierte Checkboxen
  • Verzerrte Effekte-Taste
  • Fortschritte Button-Stile

Fazit

Es gibt mehr Grenzen als nur Grenze, aber wenn Sie wollen, zu animieren, eine Grenze, die Sie haben können einige Schwierigkeiten. Behandelt die Methoden, die hier helfen, obwohl keiner von Ihnen sind eine perfekte Lösung. Welche Sie wählen, hängt von den Anforderungen Ihres Projekts, so hab ich legte eine Vergleichstabelle, um Ihnen helfen zu entscheiden.

Meine Empfehlung wäre die Verwendung von box-shadow, die das beste Gesamtbild auf die Einfachheit der Umsetzung, animation, performance-und browser-Unterstützung.

Haben Sie eine weitere Möglichkeit, eine animierte Grenze? Vielleicht eine geschickte Art zu nutzen Transformationen zum verschieben einer Grenze? Kommentar unten oder erreichen Sie mich auf, teilen Sie Ihre Lösung für die Herausforderung.

Besonderen Dank an Martin Pitt, Steve Gardner, Cher, Reinier Kaper, Joseph Rex, David Khourshid, und die Animation bei der Arbeit der Gemeinschaft.

SHARE
Previous articleAnimerte Grensen
Next articleAnimating Border