Le code CSS3 pur réalise l'affichage de plusieurs éléments en séquence

Cette fois, je vais vous apporter du code CSS3 pur pour afficher plusieurs éléments en séquence. Quelles sont les précautions pour réaliser l'affichage de plusieurs éléments en séquence avec du code CSS3 pur. jetons un coup d'oeil.

Comme le montre l'image ci-dessus, un tel effet d'animation est souvent utilisé en HTML5 pour de nombreuses promotions d'événements. 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 dans le DOM pour la première fois, 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. Par conséquent, 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;
}

Les classes qui contrôlent les effets d'animation subissent également quelques ajustements en CSS.

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

L'avantage de ceci est qu'il suffit d'ajouter une animation à la classe pour obtenir notre effet. Démo d'instanceLe code complet 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('.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);

La démo est affichée 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 ceci est loin de ce que nous souhaitons. L'effet semble être un peu pire. 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 de l'élément à 0 avant qu'il 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 comme 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 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('.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);

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('style');
    style.type = "text/css";
    document.getElementsByTagName('head')[0].appendChild(style);
    return style.sheet;
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention. vers d'autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment utiliser le modèle de boîte bizarre CSS et le modèle de boîte standard

CSS pour implémenter la disposition en accordéon

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!