CSS3 realisiert den Effekt der Anzeige mehrerer Elemente in der Seitenproduktion sequence_css3_CSS

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 realisieren. Freunde, die sich für CSS3 interessieren und diejenigen, die es benötigen, können sich auf

Wie in der Abbildung gezeigt Bild oben: Bei vielen Event-Promotionen muss häufig ein solcher Animationseffekt in HTML5 verwendet werden. 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) }
}

Nach dem Login kopieren

und verwenden Sie Animation durch Animation im Zielelement.

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

Nach dem Login kopieren

Auf diese Weise gibt es beim ersten Rendern des Elements im DOM eine Ansicht von oben nach unten Verschiebungsanimationseffekt. 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; 
  }
}

Nach dem Login kopieren

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(&#39;click&#39;, function() {
  document.querySelector(&#39;.target&#39;).classList.add(&#39;topIn&#39;);
}, !1);

Nach dem Login kopieren

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 visibility: versteckt hinzuzufügen. Aber nach display: none belegt das Element keinen Platz. Wenn dies der Fall ist, führt dies daher zu Verwirrung im Seitenlayout. Bevor wir beginnen, fügen wir dem Element eine neue Klasse hinzu.

.aninode {
  visibility: hidden;
}

Nach dem Login kopieren

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

.animated .aninode {
  visibility: visible;
}

Nach dem Login kopieren

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

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

Nach dem Login kopieren

Der Vorteil davon ist, dass wir der Klasse nur eine Animation hinzufügen müssen, um unseren Effekt zu erzielen. InstanzdemoDer vollständige Code 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);

Nach dem Login kopieren

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>.

Nach dem Login kopieren

Codepen-Demoadresse

Aber das scheint etwas hinter dem gewünschten Effekt zurück zu bleiben. 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;
}

Nach dem Login kopieren

Animationsfüllmodus: rückwärts!wichtig; Der Zweck besteht darin, die Transparenz des Elements vorher auf 0 zu halten es erscheint Status. 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>.

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Zusammenfassung

Oben ist das vom Herausgeber eingeführte CSS3 aufgeführt, um den Effekt zu erzielen, dass mehrere Elemente nacheinander angezeigt werden. Ich hoffe, es ist für alle hilfreich! !

Verwandte Empfehlungen:

So verwenden Sie Fenstereinheiten für das Layout in CSS3

CSS3-Beispiel für einen allmählich leuchtenden quadratischen Rand

Reine Sammlung und Organisation von CSS3-Effektressourcen

Das obige ist der detaillierte Inhalt vonCSS3 realisiert den Effekt der Anzeige mehrerer Elemente in der Seitenproduktion sequence_css3_CSS_web. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!