Informationen zum Implementieren des Effekts der Anzeige mehrerer Elemente nacheinander in CSS3

CSS3 ist eine aktualisierte Version von CSS. In der End-End-Entwicklung können wir Animationen in Kombination mit Keyframes verwenden, um Elementen verschiedene Animationseffekte hinzuzufügen. In diesem Artikel wird hauptsächlich der Effekt der Verwendung von CSS3 zum Anzeigen mehrerer Elemente nacheinander vorgestellt. Freunde, die es benötigen, können darauf verweisen.

Wie im Bild oben gezeigt, wird ein solcher Animationseffekt häufig in HTML5 für viele Event-Promotionen verwendet. Besonders wenn das Ende des Jahres naht, sind einige Studenten möglicherweise damit beschäftigt, an der Veranstaltungsseite des Unternehmens zu arbeiten. Es kann hilfreich sein, sich eine so kleine Fähigkeit anzueignen.

In CSS3 verwenden wir Animationen in Kombination mit Keyframes, um Elementen verschiedene Animationseffekte hinzuzufügen. Spezifische Animationen werden in Keyframes definiert und in der Animation verwendet. Sie können beispielsweise einen Animationseffekt definieren, der von oben einfliegt.

@keyframes topIn {
  from { transform: translateY(-50px) }
  to { transform: translateY(0px) }
}

und verwenden Sie Animation durch Animation im Zielelement.

<p class="target topIn"></p>
.topIn {
  animation: topIn 1s ease;
}

Auf diese Weise entsteht beim ersten Rendern des Elements im DOM ein Verschiebungsanimationseffekt von oben nach unten. Natürlich ist dieser Effekt nicht das, was wir wollen. Oft fügen wir der Animation auch einen Transparenzverlauf von 0 bis 1 hinzu.

@keyframes topIn {
  from { 
    transform: translateY(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateY(0px);
    opacity: 1; 
  }
}

Was sollen wir tun, wenn wir auch das Anzeige-Timing von Elementen steuern möchten? Eine einfachere Möglichkeit besteht darin, einen Klassenstil hinzuzufügen, der die Animation des Zielelements nur dann steuert, wenn Animationseffekte erforderlich sind.

btn.addEventListener('click', function() {
  document.querySelector('.target').classList.add('topIn');
}, !1);

Da gibt es aber ein Problem. Ich glaube, dass Freunde, die es praktiziert haben, dies bereits entdeckt haben. Wir gehen davon aus, dass sich Elemente in einem unsichtbaren Zustand befinden, bevor sie die Szene betreten. Aber allein durch die oben beschriebene Vorgehensweise ist das Element sichtbar, bevor die Animation beginnt. Was ist also zu tun?

Wir können uns leicht vorstellen, dem Element „display: none“ oder „sichtbarkeit: versteckt“ hinzuzufügen. Aber nach display: none belegt das Element keinen Platz. Wenn dies der Fall ist, führt dies zu Verwirrung im Seitenlayout. Bevor wir beginnen, fügen wir dem Element eine neue Klasse hinzu.

.aninode {
  visibility: hidden;
}

und fügen Sie eine neue Klasse hinzu, um das Element anzuzeigen.

.animated .aninode {
  visibility: visible;
}

Die Klasse, die den Animationseffekt steuert, benötigt auch einige Anpassungen im CSS.

.animated .topIn {
  animation: topIn 1s ease;
}

Der Vorteil davon ist, dass wir der Klasse nur eine Animation hinzufügen müssen, um unseren Effekt zu erzielen. Der vollständige Code der Beispieldemo lautet wie folgt:

<p class="container">
  <p class="target aninode leftIn"></p>
  <button class="btn show">show</button>
  <button class="btn hide">hide</button>
</p>
.container {
  width: 100px;
  margin: 0 auto;
}
.aninode {
  visibility: hidden;
}
.animated .aninode {
  visibility: visible;
}
.target {
  width: 100px;
  height: 100px;
  background: orange;
  border-radius: 4px;
  margin: 20px 0;
}
.animated .topIn {
  animation: topIn 1s ease;
}
.animated .leftIn {
  animation: leftIn 1s ease;
}
.btn {
  width: 100px;
  height: 30px;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.1s;
}
.btn:active {
  border: none;
  background: orange;
  color: #fff;
}
@keyframes topIn {
  from { 
    transform: translateY(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateY(0px);
    opacity: 1; 
  }
}
@keyframes leftIn {
  from { 
    transform: translateX(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateX(0px);
    opacity: 1; 
  }
}
var show = document.querySelector(&#39;.show&#39;);
var hide = document.querySelector(&#39;.hide&#39;);
var container = document.querySelector(&#39;.container&#39;);
show.addEventListener(&#39;click&#39;, function() {
  container.classList.add(&#39;animated&#39;);
}, !1);
hide.addEventListener(&#39;click&#39;, function() {
  container.classList.remove(&#39;animated&#39;);
}, !1);

Die Demo wird wie folgt angezeigt:

See the Pen <a href=&#39;https://codepen.io/yangbo5207/pen/NXKrPg/&#39;>NXKrPg</a> by Ormie (<a href=&#39;https://codepen.io/yangbo5207&#39;>@yangbo5207</a>) on <a href=&#39;https://codepen.io&#39;>CodePen</a>.

Codepen-Demo-Adresse

Aber das scheint ein wenig hinter dem gewünschten Effekt zurück zu sein. Denken Sie weiter. Wenn Sie möchten, dass die folgenden Elemente später als die vorherigen Elemente angezeigt werden, müssen Sie zunächst die Verzögerungszeit steuern. Wir müssen viele Klassen haben, die die Verzögerungszeit festlegen.

.delay200 {
    animation-delay: 200ms;
    animation-fill-mode: backwards!important;
}
.delay400 {
    animation-delay: 400ms;
    animation-fill-mode: backwards!important;
}
.delay600 {
    animation-delay: 600ms;
    animation-fill-mode: backwards!important;
}
.delay800 {
    animation-delay: 800ms;
    animation-fill-mode: backwards!important;
}

animation-fill-mode:backward!important; Der Zweck besteht darin, die Transparenz auf 0 zu halten, bevor das Element erscheint. Verhindern Sie, dass das Element direkt nach dem Hinzufügen einer Animation angezeigt wird.

Fügen Sie !important hinzu, um zu verhindern, dass die Eigenschaft „animation-fill-mode“ überschrieben wird, wenn die Animationsabkürzung in einer neuen Klasse verwendet wird. Wenn !important hier nicht geschrieben wird, kann die abgekürzte Form nicht in Animationsklassen wie topIn verwendet werden.

Danach müssen wir nur noch den obigen Code zum CSS hinzufügen und einige Änderungen am HTML vornehmen, um den gewünschten Effekt zu erzielen.

See the Pen <a href=&#39;https://codepen.io/yangbo5207/pen/mpbEEE/&#39;>mpbEEE</a> by Ormie (<a href=&#39;https://codepen.io/yangbo5207&#39;>@yangbo5207</a>) on <a href=&#39;https://codepen.io&#39;>CodePen</a>.

Codepen-Demoadresse

Der vollständige Code lautet wie folgt:

<p class="container">
  <p class="targets aninode">
      <p class="item leftIn">春晓</p>
      <p class="item leftIn delay200">春眠不觉晓</p>
      <p class="item leftIn delay400">处处蚊子咬</p>
      <p class="item leftIn delay600">夜来风雨声</p>
      <p class="item leftIn delay800"><此处请留下你们的才华></p>
  </p>
  <button class="btn show">show</button>
  <button class="btn hide">hide</button>
</p>
.container {
  width: 200px;
  margin: 0 auto;
}
.aninode {
  visibility: hidden;
}
.animated .aninode {
  visibility: visible;
}
.targets {
  margin: 20px 0;
}
.targets .item {
    border: 1px solid #ccc;
    margin: 10px 0;
    line-height: 2;
    padding: 2px 6px;
    border-radius: 4px;
}
.animated .topIn {
  animation: topIn 1s ease;
}
.animated .leftIn {
  animation-name: leftIn;
  animation-duration: 1s;
}
.btn {
  width: 100px;
  height: 30px;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.1s;
}
.btn:active {
  border: none;
  background: orange;
  color: #fff;
}
@keyframes topIn {
  from { transform: translateY(-50px) }
  to { transform: translateY(0px) }
}
@keyframes leftIn {
  from { 
    transform: translateX(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateX(0px);
    opacity: 1; 
  }
}
.delay200 {
    animation-delay: 200ms;
    animation-fill-mode: backwards!important;
}
.delay400 {
    animation-delay: 400ms;
    animation-fill-mode: backwards!important;
}
.delay600 {
    animation-delay: 600ms;
    animation-fill-mode: backwards!important;
}
.delay800 {
    animation-delay: 800ms;
    animation-fill-mode: backwards!important;
}
var show = document.querySelector(&#39;.show&#39;);
var hide = document.querySelector(&#39;.hide&#39;);
var container = document.querySelector(&#39;.container&#39;);
show.addEventListener(&#39;click&#39;, function() {
  container.classList.add(&#39;animated&#39;);
}, !1);
hide.addEventListener(&#39;click&#39;, function() {
  container.classList.remove(&#39;animated&#39;);
}, !1);

Wir haben festgestellt, dass sich die Logik von js in keiner Weise geändert hat. Es geht immer noch nur darum, gegebenenfalls Animationen hinzuzufügen/zu entfernen.

Osterei:

In der Praxis werden wir auch auf eine schwierigere Sache stoßen. Es soll das Schreiben von Kursen verzögern. Wir wissen möglicherweise nicht, welche Zeitunterschiede verwendet werden und wie viele Elemente verwendet werden. Wenn wir sie alle von Hand schreiben, ist es zu mühsam, die Arbeit zu wiederholen. Wir können also js zum dynamischen Einfügen verwenden. Der Code lautet wie folgt:

const styleSheet = getSheet();
var delay = 100;
while (delay < 10000) {
    styleSheet.insertRule(`.animated .delay${delay}{ animation-delay: ${delay}ms; animation-fill-mode: backwards; }`, styleSheet.cssRules.length);
    delay += delay < 3000 ? 100 : 1000;
}
function getSheet() {
    var sheets = document.styleSheets;
    var len = sheets.length;
    for(var i = 0; i <= len; i++) {
        var sheet = sheets.item(i);
        try {
            if (sheet.cssRules) {
                return sheet;
            }
        } catch(e) {} 
    }
    var style = document.createElement(&#39;style&#39;);
    style.type = "text/css";
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(style);
    return style.sheet;
}

Verwandte Empfehlungen:

php function array_push( )

JavaScript fügt ein oder mehrere Elemente am Ende eines Arrays hinzu und gibt die neue Länge push() zurück

PHP gibt mehrere Anordnungen und Kombinationen von Elementen aus_PHP-Tutorial

Das obige ist der detaillierte Inhalt vonInformationen zum Implementieren des Effekts der Anzeige mehrerer Elemente nacheinander in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!