css3 réalise l'effet d'afficher plusieurs éléments dans la production de pages séquence_css3_CSS

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 intéressés par CSS3 et ceux qui en ont besoin peuvent se référer à

Comme indiqué dans le. image ci-dessus, dans De nombreuses promotions d'événements nécessitent souvent d'utiliser un tel effet d'animation en HTML5. 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) }
}

Copier après la connexion

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

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

Copier après la connexion

De cette façon, lorsque l'élément est rendu pour la première fois dans le DOM, il y aura un rendu de haut en bas Effet d'animation de déplacement. 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; 
  }
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

.animated .aninode {
  visibility: visible;
}

Copier après la connexion

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

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

Copier après la connexion

L'avantage de ceci est qu'il suffit d'ajouter un animé à la classe pour obtenir notre effet. Démo de l'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(&#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);

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

animation-fill-mode: forwards!important Le but est de garder la transparence de l'élément à 0 avant il apparaît le statut. 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>.

Copier après la connexion

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(&#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);

Copier après la connexion

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

Copier après la connexion

Résumé

Ci-dessus Ce qui précède est le CSS3 introduit par l'éditeur pour obtenir l'effet d'afficher plusieurs éléments dans l'ordre. J'espère que cela sera utile à tout le monde ! !

Recommandations associées :

Comment utiliser les unités de fenêtre pour la mise en page en CSS3

Exemple CSS3 de bordure carrée qui brille progressivement

Collecte et organisation de ressources à effet CSS3 pur

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!