Comment utiliser CSS3 pour afficher plusieurs éléments en séquence

En CSS3, nous utilisons une animation combinée avec des images clés pour ajouter divers effets d'animation aux éléments. Cet article présente principalement l'effet de CSS3 pour réaliser l'affichage séquentiel de plusieurs éléments. Les amis qui en ont besoin peuvent se référer à

Comme le montre l'image ci-dessus, il est souvent utilisé. dans de nombreuses activités pour promouvoir HTML5 Vous devez utiliser un tel effet d'animation. D’autant plus qu’à l’approche de la fin de l’année, certains étudiants peuvent être occupés à travailler sur la page événementielle de l’entreprise. Il peut être utile d’acquérir une si petite compétence.

En CSS3, nous utilisons une animation combinée avec des images clés pour ajouter divers effets d'animation aux éléments. Des animations spécifiques sont définies dans des images clés et utilisées dans l'animation. Par exemple, vous pouvez définir un effet d'animation qui vole par le haut.

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

et utilisez l'animation via l'animation dans l'élément cible.

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

De cette façon, lorsque l'élément est rendu pour la première fois dans le DOM, il y aura un effet d'animation de déplacement de haut en bas. Bien entendu, cet effet n’est pas celui que nous souhaitons. Souvent, nous ajoutons également un dégradé de transparence de 0 à 1 à l'animation.

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

Que devons-nous faire si nous voulons également pouvoir contrôler le timing d'affichage des éléments ? Un moyen plus simple consiste à ajouter un style de classe qui contrôle l'animation de l'élément cible uniquement lorsque des effets d'animation sont nécessaires.

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

Mais il y a un problème avec ça. Je crois que les amis qui l'ont pratiqué l'ont déjà découvert. Nous nous attendons à ce que les éléments soient dans un état invisible avant d’entrer en scène. Mais simplement en faisant ce qui précède, l'élément peut être vu avant le début de l'animation. Alors que faut-il faire ?

On peut facilement penser à ajouter display: none ou visible: caché à l'élément. Mais après affichage : aucun, l'élément n'occupe pas d'espace. Donc si tel est le cas, cela entraînera une confusion dans la mise en page. Donc avant de commencer, nous ajoutons une nouvelle classe à l’élément.

.aninode {
  visibility: hidden;
}

et ajoutez une nouvelle classe pour afficher l'élément.

.animated .aninode {
  visibility: visible;
}

La classe qui contrôle l'effet d'animation a également besoin de quelques ajustements en CSS.

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

L'avantage de ceci est qu'il suffit d'ajouter un animé à la classe pour obtenir notre effet. Le code complet de l'exemple de démo est le suivant :

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

La démo s'affiche comme suit :

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

Adresse de démonstration codepen

Mais cela semble être un peu en deçà de l'effet souhaité. Continuez à réfléchir. Tout d'abord, si vous souhaitez que les éléments suivants apparaissent plus tard que les éléments précédents, vous devez alors contrôler le temps de retard. Nous devons avoir de nombreuses classes qui définissent le temps de retard.

.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: forwards!important; Le but est de garder la transparence à 0 avant que l'élément n'apparaisse. Empêchez l'élément d'apparaître directement après l'ajout d'une animation.

Ajoutez !important pour éviter que la propriété animation-fill-mode ne soit écrasée lors de l'utilisation de l'abréviation d'animation dans une nouvelle classe. Si !important n'est pas écrit ici, la forme abrégée ne peut pas être utilisée dans les classes d'animation telles que topIn.

Après cela, il nous suffit d'ajouter le code ci-dessus au CSS et d'apporter quelques modifications au HTML pour obtenir l'effet souhaité.

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

Adresse de démonstration du codepen

Le code complet est le suivant :

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

Nous avons constaté que la logique de js n'a en aucun cas changé. Il s'agit toujours d'ajouter/supprimer des animations le cas échéant.

Easter egg :

Dans la pratique, nous rencontrerons également une chose plus gênante. Il s’agit de retarder l’écriture des cours. Nous ne savons peut-être pas quels décalages horaires seront utilisés et combien d'éléments seront utilisés. Si nous les écrivons tous à la main, il sera trop difficile de répéter le travail. Nous pouvons donc utiliser js pour insérer dynamiquement. Le code est le suivant :

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun pour en savoir plus. contenu, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser CSS pour étirer et remplir l'image d'arrière-plan afin d'éviter un affichage répété

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!