Анимировать один div за другим с чистым css - PullRequest
Новая
       99

Анимировать один div за другим с чистым css

3 голосов
/ 25 февраля 2020 
<style>
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.card {
  height: 400px;
  width: 100%;
  max-width: 360px;
  margin: 50px 10px 0px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  animation: bounceIn 0.85s linear forwards;
}

Я использую анимированный код. css, чтобы оживить мою карту. У меня есть несколько карт, которые я хотел бы оживить одну за другой. Задержка для первой карты будет 0,85 с, 0,9 с для секунд, 0,95 с для третьей и так далее. Есть ли способ сделать это в CSS без создания тонны новых классов, таких как .card_1, .card_2 и так далее?

Ответы [ 3 ]

3 голосов
/ 25 февраля 2020

Похоже, что вы после ошеломляющей анимации. Вот два способа сделать это:

Sass L oop

Это самый «дорогой» с точки зрения конечного кода CSS и требует предварительной обработки. Если у вас не слишком много элементов, они остаются вполне приемлемыми и будут работать на большем количестве браузеров, если вам нужно настроить таргетинг на старые. 

/* Your previous styles… */
.card {
  $initial-delay: .85s;
  $increase-delay: .1s;
  $total-cards: 10; /* Say you have 10 cards, you can change this number */

  @for $i from 1 through $total-cards {
    &:nth-child($i) {
      $zero-i: $i - 1; // Make it zero-based
      animation-delay: #{ $initial-delay + $zero-i * $increase-delay };  
    }
  }
}

CSS пользовательские свойства

Современные браузеры могут использовать пользовательские свойства css, также известные как CSS переменные. Назначая в разметку те же значения из примера Sass, вы можете достичь того же результата. 

<ul class="card-container" style="--t: 10;">
   <li class="card" style="--i: 0;">Card content…</li>
   <li class="card" style="--i: 1;">Card content…</li>
   <li class="card" style="--i: 2;">Card content…</li>
   <!-- And so on… -->
</ul>

/* Your previous styles… */
.card {
  animation-delay: calc(.85s + .1s * var(--i));
}

Меньше CSS, но вам, вероятно, потребуется обработать вывод HTML для добавления эти дополнительные style атрибуты для каждого элемента. Обратите внимание, что назначение контейнера --t здесь не требуется, но я хотел убедиться, что вы могли видеть, как работает каждый метод.

0 голосов
/ 25 февраля 2020

Я не думаю, что вы можете сделать это с чистым css без записи каждого идентификатора или класса и изменения свойства анимации css, чтобы оно включало еще 0,05 секунды.

Вы можете сделать это программно с javascript. 

const beginSpeed = 0.85
const cards = []

cards.forEach((card, i) => {
  cards.push(<div id=`card_${i}` class="card" style=`animation: bounceIn ${beginSpeed + (i * .05)}s linear forwards;` ></div>)
})

В качестве альтернативы, если вы просто хотите использовать a для l oop

const beginSpeed = 0.85
const numberOfCardsDesired = 40
const cards = []

for(let i = 0; i < numberOfCardsDesired; i++) {
  cards.push(<div id=`card_${i}` class="card" style=`animation: bounceIn ${beginSpeed + (i * .05)}s linear forwards;` ></div>)
}

Умножив .05 на время индекса, он вызовет каждый последующий элемент div до 0,05 секунд после предыдущего. В ваш css вы можете включить карту со всеми элементами c css. Сделав это, вы можете просто изменить переменную «numberOfCardsDesired» на любое число, которое вы хотите, и чтобы многие карты оживляли 

.card {
  height: 400px;
  width: 100%;
  max-width: 360px;
  margin: 50px 10px 0px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

Я прошу прощения, если мой ответ не был именно тем, что вы ищете, так как не строго использовать CSS. Надеюсь, это каким-то образом помогло вам. Удачи!

0 голосов
/ 25 февраля 2020

Нет, не делая что-то действительно прикольное, например , этот ваш. css файл не сможет узнать, сколько элементов вы должны анимировать. В зависимости от вашей среды я бы рекомендовал либо использовать встроенный стиль для продолжительности перехода, отображаемый с помощью серверной логики c, если это возможно, либо использовать JavaScript, если нет.

Пример на стороне сервера с шаблонами Twig: 

{% for item in items %} 
    <div class="card" style="transition-duration={{ loop.index }}s"></div> 
{% endfor %}

Пример в Javascript: 

[...document.querySelectorAll('.card')].forEach((card, i) => {
    card.style.transitionDuration = i + 's'
})

Я не определил точные запрошенные задержки, или проверено выше. Но это подход.

...