So verwenden Sie CSS3, um mehrere Elemente nacheinander anzuzeigen

In CSS3 verwenden wir Animationen in Kombination mit Keyframes, um Elementen verschiedene Animationseffekte hinzuzufügen. In diesem Artikel wird hauptsächlich der Effekt von CSS3 vorgestellt, um die sequentielle Anzeige mehrerer Elemente zu erreichen In vielen Aktivitäten zur Förderung von HTML5 müssen Sie einen solchen Animationseffekt verwenden. 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);

Aber dabei gibt es 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);

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-Demo-Adresse

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;
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Bitte achten Sie auf die chinesische PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie CSS, um das Hintergrundbild zu strecken und zu füllen, um eine wiederholte Anzeige zu vermeiden

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3, um mehrere Elemente nacheinander anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!