使用延迟(javascript或css)动画将类附加到div子级
使用延迟(javascript或css)动画将类附加到div子级
提问于 2021-11-24 12:43:16
所以我有这样的结构，其中容器cc-entry- animation -wrapper中的每个div子元素(.cc-entry-animation- colour )都有不同的颜色背景，所以我有一个调用关键帧的类动画，我想将那个类附加到div子元素(.cc-entry-animation-colour)，但不是同时的，所以从上到下，可能会延迟一秒。
<div class="entry-animation">
<div class="cc-entry-animation-wrapper">
<div class="cc-entry-animation-colour green-3"></div>
<div class="cc-entry-animation-colour green-2"></div>
<div class="cc-entry-animation-colour green-1"></div>
<div class="cc-entry-animation-colour blue-3"></div>
<div class="cc-entry-animation-colour blue-2"></div>
<div class="cc-entry-animation-colour blue-1"></div>
<div class="cc-entry-animation-colour violet-3"></div>
<div class="cc-entry-animation-colour violet-2"></div>
<div class="cc-entry-animation-colour violet-1"></div>
<div class="cc-entry-animation-colour red-3"></div>
<div class="cc-entry-animation-colour red-2"></div>
<div class="cc-entry-animation-colour red-1"></div>
<div class="cc-entry-animation-colour orange-3"></div>
<div class="cc-entry-animation-colour orange-2"></div>
<div class="cc-entry-animation-colour orange-1"></div>
<div class="cc-entry-animation-colour yellow-3"></div>
<div class="cc-entry-animation-colour yellow-2"></div>
<div class="cc-entry-animation-colour yellow-1"></div>
</div>
</div>这是类的外观：
.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个did变得动画。因此，我试图通过将div一个接一个地旋转90度来实现一种“扇形效果”。
回答 1
Stack Overflow用户
发布于 2021-11-24 13:11:03
我不认为这是最好的做法，但我建议你效仿我的例子：
- 通过使用
querySelectorAll结果的children属性获取所有孩子 - 为每个孩子应用样式
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`;
}
});或者，您可以创建一些包含您的延迟的类：
<style>
.delay-0 { animation-delay: 0s; }
.delay-1 { animation-delay: 1s; }
.delay-2 { animation-delay: 2s; }
.delay-3 { animation-delay: 3s; }
</style>
<!-- ... -->
<div class="cc-entry-animation-colour yellow-1 delay-0"></div>它可以像我的例子中那样，通过在javascript中使用classList和静态的方式来动态工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70096289
复制相关文章
相似问题
腾讯云开发者
