CSS3 реализует последовательное отображение нескольких элементов.

Как показано на рисунке выше, такой анимационный эффект часто используется во многих мероприятиях по продвижению html5. Тем более, что приближается конец года, возможно, некоторые студенты заняты страницей мероприятия компании, и получение такого небольшого навыка может быть просто полезным для вас.

В CSS3 мы используем анимацию в сочетании с ключевыми кадрами для добавления к элементам различных анимационных эффектов. В анимации используются определенные анимации, определенные в ключевых кадрах. Например, вы можете определить анимацию полета сверху.

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

И используйте анимацию с анимацией в целевом элементе.

<div class="target topIn"></div>

.topIn {
  animation: topIn 1s ease;
}

Таким образом, когда элемент впервые отображается в DOM, он будет иметь анимацию смещения сверху вниз. Конечно, этот эффект не то, что мы хотим. Часто мы также добавляем в анимацию градиент прозрачности от 0 до 1.

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

Мы также хотим иметь возможность управлять отображением элемента Что нам делать? Более простой способ — добавить стиль класса, управляющий анимацией, к целевому элементу, когда требуется отобразить эффект анимации.

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

Но есть проблема с этим. Я считаю, что друзья, которые практиковали, уже обнаружили это. Мы ожидаем, что элемент будет невидимым, пока он не появится на сцене. Но, как и выше, элемент можно увидеть до начала анимации. Так что должно быть сделано?

Мы можем легко думать о добавлении элементов к элементамdisplay: noneилиvisibility: hidden. Однако из-заdisplay: noneПосле этого элемент не является заполнителем. Так что, если это так, это приведет к путанице в макете страницы. Итак, давайте добавим новый класс к элементу, прежде чем мы начнем.

.aninode {
  visibility: hidden;
}

И добавьте новый класс, чтобы элемент отображался.

.animated .aninode {
  visibility: visible;
}

Класс, управляющий эффектом анимации, также имеет некоторые настройки в css.

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

Преимущество этого в том, что нам нужно только добавитьanimated, мы можем добиться нашего эффекта. Полный код демонстрационного примера выглядит следующим образом:

<div class="container">
  <div class="target aninode leftIn"></div>
  <button class="btn show">show</button>
  <button class="btn hide">hide</button>
</div>

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

Демо показывает следующее:

See the Pen <a href='https://codepen.io/yangbo5207/pen/NXKrPg/'>NXKrPg</a> by Ormie (<a href='https://codepen.io/yangbo5207'>@yangbo5207</a>) on <a href='https://codepen.io'>CodePen</a>.

демо-адрес codepen

Но это, кажется, далеко не то, что мы хотим. Продолжай думать. Прежде всего, если вы хотите, чтобы следующий элемент появлялся позже, чем предыдущий элемент, то вы должны контролировать время задержки, у нас должно быть много классов, которые устанавливают время задержки.

.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: backwards!important;Цель состоит в том, чтобы сохранить прозрачность элемента равной 0, пока он не появится. предотвратить при добавленииanimatedЭлементы появляются сразу после этого.

Добавить!importantсостоит в том, чтобы предотвратить использование сокращенной анимации в новом классеanimation-fill-modeсвойства переопределяются. Если здесь не написано!important, затем вtopInСокращенная форма не может использоваться в таких классах анимации.

После этого нам нужно только добавить приведенный выше код в css и внести некоторые изменения в html для достижения желаемого эффекта.

See the Pen <a href='https://codepen.io/yangbo5207/pen/mpbEEE/'>mpbEEE</a> by Ormie (<a href='https://codepen.io/yangbo5207'>@yangbo5207</a>) on <a href='https://codepen.io'>CodePen</a>.

демо-адрес codepen

Полный код выглядит следующим образом:

<div class="container">
  <div class="targets aninode">
      <div class="item leftIn">春晓</div>
      <div class="item leftIn delay200">春眠不觉晓</div>
      <div class="item leftIn delay400">处处蚊子咬</div>
      <div class="item leftIn delay600">夜来风雨声</div>
      <div class="item leftIn delay800"><此处请留下你们的才华></div>
  </div>
  <button class="btn show">show</button>
  <button class="btn hide">hide</button>
</div>

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

Мы обнаружили, что логика js не изменилась. По-прежнему просто добавляю/удаляю анимацию, где это уместно.

Пасхальные яйца:

На практике мы столкнемся с более хлопотной вещью. Является ли задержать написание класса. Мы можем не знать, какая разница во времени будет использоваться, сколько элементов будет использовано, и если все будет написано от руки, повторять работу действительно слишком хлопотно. Таким образом, мы можем использовать js для динамической вставки. код показывает, как показано ниже:

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