Reiner CSS3-Code realisiert die Anzeige mehrerer Elemente nacheinander

Dieses Mal bringe ich Ihnen reinen CSS3-Code, um die Anzeige mehrerer Elemente nacheinander zu realisieren. Was sind die Vorsichtsmaßnahmen, um die Anzeige mehrerer Elemente nacheinander mit reinem CSS3-Code zu realisieren? Praktischer Fall, werfen wir einen Blick darauf.

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 Animation durch Animation im Zielelement verwenden.

<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. Wenn Sie jedoch die oben genannten Schritte ausführen, 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 daher 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 Klassen, die Animationseffekte steuern, erfahren 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. Instanz-DemoDer 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('.show');
var hide = document.querySelector('.hide');
var container = document.querySelector('.container');
show.addEventListener('click', function() {
  container.classList.add('animated');
}, !1);
hide.addEventListener('click', function() {
  container.classList.remove('animated');
}, !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 ist weit von dem entfernt, was wir wollen. Der Effekt scheint etwas schlimmer 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;
}

Animationsfüllmodus: rückwärts!wichtig; Der Zweck besteht darin, die Transparenz des Elements auf 0 zu halten, bevor es angezeigt wird. 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('.show');
var hide = document.querySelector('.hide');
var container = document.querySelector('.container');
show.addEventListener('click', function() {
  container.classList.add('animated');
}, !1);
hide.addEventListener('click', function() {
  container.classList.remove('animated');
}, !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('style');
    style.type = "text/css";
    document.getElementsByTagName('head')[0].appendChild(style);
    return style.sheet;
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie das CSS-Weird-Box-Modell und das Standard-Box-Modell

CSS zur Implementierung des Akkordeon-Layouts

Das obige ist der detaillierte Inhalt vonReiner CSS3-Code realisiert die Anzeige mehrerer Elemente nacheinander. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!