JS verwendet Clip-Pfad, um eine dynamische Bereichs-Clipping-Funktion zu implementieren

Hintergrund

Heute habe ich CodePen durchsucht und einen sehr interessanten Effekt gesehen:

CodePen-Demo – Material Design-Menü von Bennett Feely

Es gibt noch einige Punkte, die es wert sind, über diesen Effekt erforscht und gelernt zu werden. Schauen wir uns das unten genauer an.

Wie kann ein ähnlicher Effekt erzielt werden?

Überlegen Sie zunächst einmal: Was würden Sie tun, wenn man Sie bitten würde, den oben beschriebenen Effekt zu erzielen?

Hier liste ich kurz einige mögliche Lösungen auf:

• Kastenschatten
• radialer Farbverlauf
• Skalierungstransformation: scale()

Gehen Sie sie schnell einzeln durch.

Verwenden von Box-Shadow

Wenn Sie box-shadow verwenden, sieht der Code ungefähr so ​​aus:

<div Klasse="g-container">
    <div Klasse="g-item"></div>
</div>

.g-container {
    Position: relativ;
    Breite: 400px;
    Höhe: 300px;
    Überlauf: versteckt;
}

.g-Artikel {
    Position: absolut;
    Breite: 48px;
    Höhe: 48px;
    Randradius: 50 %;
    Hintergrund: #fff;
    oben: 20px;
    links: 20px;
    Kastenschatten: 0 0 0 0 #fff;
    Übergang: Box-Shadow .3s linear;
    
    &:schweben {
        Kastenschatten: 0 0 0 420px #fff;
    }
}

Der Kern ist:

• Die äußere Ebene ist eine Maske mit overflow: hideen Set
• Beim Hovern über das innere Element erfolgt eine Änderung box-shadow: 0 0 0 0 #fff zu box-shadow: 0 0 0 420px #fff

Die Wirkung ist wie folgt:

Die gesamte Animation wird simuliert, weist jedoch zwei schwerwiegende Probleme auf:

• Wenn unsere Maus den Kreis verlässt, beginnt die gesamte Animation umzukehren und der weiße Bereich beginnt zu verschwinden. Wenn wir Schaltflächenoperationen ausführen möchten, werden diese nicht abgeschlossen.
• Elemente, die nach der Erweiterung der Animation im Rechteck ausgeblendet sind, lassen sich nicht einfach platzieren

Obwohl box-shadow gut aussieht, müssen wir es also aufgeben. CodePen-Demo – Box-Shadow-Zoom-In-Animation

Verwenden Sie radialen Farbverlauf, um

Als Nächstes können wir radial-gradient plus CSS @property verwenden, um den obigen Effekt wiederherzustellen:

<div Klasse="g-container"></div>

@Eigenschaft --Größe {
  Syntax: '<Länge>';
  erbt: falsch;
  Anfangswert: 24px;
}

.g-container {
    Position: relativ;
    Breite: 400px;
    Höhe: 300px;
    Überlauf: versteckt;
    Hintergrund: radialer Farbverlauf (Kreis bei 44px 44px, #fff 0, #fff var(--size), transparent var(--size), transparent 0);
    Übergang: --size .3s linear;
    
    &:schweben {
        --Größe: 450px;
    }
}

Durch die Steuerung des radialen Verlaufsanimationseffekts können wir beim Schweben den ursprünglichen kleinen Kreishintergrund in einen großen Kreishintergrund ändern. Der Effekt ist wie folgt:

Ähm, die Wirkung ist zwar wiederhergestellt, aber das Problem ist auch fatal:

• Da es sich um eine Hintergrundänderung handelt, muss die Maus nicht über den kleinen Kreis fahren, sondern nur in den Bereich des Divs gelangen und die Animation wird gestartet. Das ist offensichtlich falsch.
• Ähnlich wie bei der ersten box-shadow -Methode ist der DOM des unter dem Weiß verborgenen Navigationselements nicht einfach zu platzieren.

CodePen-Demo – radialer Farbverlaufszoom in der Animation

Ähm, es gibt noch eine andere Methode, nämlich die Verwendung der transform: scale() , aber auch hier gibt es einige Probleme, auf die ich hier nicht näher eingehen werde.

Wenn Sie also den oben genannten Effekt erzielen möchten, ist der Kern folgender:

• Die Animation wird gestartet, wenn die Maus über den Kreis bewegt wird. Die Maus kann innerhalb des erweiterten Bereichs frei bewegt werden, ohne den Animationseffekt einzuschränken.
• Nachdem die Animation erweitert wurde, sollte die Platzierung des DOM im Inneren nicht zu problematisch sein. Am besten ist es, wenn Sie die Anzeige und das Ausblenden des Inhalts im Inneren ohne die Hilfe von Javascript steuern können.

Dynamisches Bereichs-Clipping mithilfe von Clip-Pfad erreichen

Hier benötigen wir also tatsächlich einen dynamischen Flächenzuschnitt.

In diesem Artikel von mir – Wie implementiert man overflow: hidden, ohne overflow: hidden zu verwenden? hat mehrere Möglichkeiten zum Zuschneiden von Elementen in CSS vorgestellt. Die für diesen Effekt am besten geeignete Methode ist Clip-Path.

Mit clip-path lässt sich dynamisches Clipping sehr gut umsetzen und der Code ist zudem sehr einfach:

<div Klasse="g-container"></div>

.g-container {
    Position: relativ;
    Breite: 400px;
    Höhe: 300px;
    Überlauf: versteckt;
    Übergang: Clip-Pfad .3s linear;
    Clip-Pfad: Kreis (20px bei 44px 44px);
    Hintergrund: #fff;
    
    &:schweben {
        Clip-Pfad: Kreis (460px bei 44px 44px);
    }
}

Wir müssen nur clip-path verwenden, um ein rechteckiges Div am Anfang mit clip-path: circle(20px at 44px 44px) in einen Kreis zu schneiden . Beim Schweben können wir den Radius des Schnittkreises auf den gesamten rechteckigen Bereich erweitern.

Die Wirkung ist wie folgt:

Auf diese Weise können wir den Effekt des Titelbildes perfekt erzielen und die integrierten DOM-Elemente können direkt in dieses Div geschrieben werden.

<div Klasse="g-container">
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</div>

Die Wirkung ist wie folgt:

CodePen-Demo – Clip-Pfad-Zoom in der Animation

Dies ist eine sehr interessante Technik, bei der mithilfe von Clip-Pfaden dynamisches Bereichs-Clipping erreicht wird. Ich hoffe, dass jeder sie beherrschen kann.

Dies ist das Ende dieses Artikels über die Verwendung von Clip-Path in JS zum Implementieren dynamischer Bereichszuschneidung. Weitere relevante Inhalte zum Bereichszuschneiden von Clip-Path finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!