Блог

Итак, у меня есть такая структура, где каждый дочерний элемент div(.cc-запись-анимация-цвет) внутри контейнера cc-запись-анимация-оболочка имеет другой цветной фон, поэтому у меня есть анимация класса, которая вызывает ключевой кадр, и я хотел бы прикрепить этот класс к дочернему элементу div (.cc-запись-анимация-цвет), но не одновременно, так что сверху вниз, возможно, с задержкой в одну секунду.

 lt;div class="entry-animation"gt;  lt;div class="cc-entry-animation-wrapper"gt;   lt;div class="cc-entry-animation-colour green-3"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour green-2"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour green-1"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour blue-3"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour blue-2"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour blue-1"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour violet-3"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour violet-2"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour violet-1"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour red-3"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour red-2"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour red-1"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour orange-3"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour orange-2"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour orange-1"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour yellow-3"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour yellow-2"gt;lt;/divgt;  lt;div class="cc-entry-animation-colour yellow-1"gt;lt;/divgt;   lt;/divgt; lt;/divgt;  

Так вот как выглядит этот класс:

 .animate-fan{  animation:abanico 2s infinite;  }   @keyframes abanico {  from {  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(-90deg) skew(0deg, 0deg); transform-style: preserve-3d;  }    to {  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(90deg) skew(0deg, 0deg); transform-style: preserve-3d;  }  }  

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

 .cc-entry-animation-colour.yellow-1 {  /*more attributes here that I am omiting*/  animation:abanico 2s infinite;  }   .cc-entry-animation-colour.yellow-2 {  /*more attributes here that I am omiting*/  animation:abanico 2s infinite;  animation-delay:1s;  }  .cc-entry-animation-colour.yellow-3 {  /*more attributes here that I am omiting*/  animation:abanico 2s infinite;  animation-delay:2s;  }  ...etc   

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

Я не думаю, что это лучшая практика, но я предлагаю вам поступить так, как показано ниже на моем примере :

1. Получите всех детей, используя children свойство querySelectorAll результата
2. Для каждого ребенка применяйте стиль animationDelay (вам нужно увеличить его на одну секунду, чтобы вы могли использовать index его для правильного применения)

 window.addEventListener('load', function() {  const childs = [...document.querySelectorAll('cc-entry-animation-wrapper').children];   childs.forEach(function(child, index) {  child.style.animationDelay = `${index}s`;  } });  

Или вы можете создать какой-нибудь класс, содержащий вашу задержку :

 lt;stylegt; .delay-0 { animation-delay: 0s; } .delay-1 { animation-delay: 1s; } .delay-2 { animation-delay: 2s; } .delay-3 { animation-delay: 3s; } lt;/stylegt;  lt;!-- ... --gt;  lt;div class="cc-entry-animation-colour yellow-1 delay-0"gt;lt;/divgt;   

он может работать динамически, играя с classList помощью javascript и статически, как в моем примере.