英文:
Make icons appear gradually
问题
我有一个图标容器，并且我想制作一个动画，逐个延迟出现图标。以下是大致展示容器的示例。
.container{
display:flex;
gap: 8px;
flex-flow: row wrap;
}
.container > img{
width: auto;
height: auto;
max-width: 40px;
max-height: 40px;
}
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
<!-- 这里包括更多图标的代码... -->
</div>
是否有人知道如何使用关键帧、JavaScript或它们的组合来实现这个效果？
英文:
I have an icon container, and I would like to make an animation that gradually delays the appearance of icons one at a time. Below is a small example of more or less how the box is
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container{
display:flex;
gap: 8px;
flex-flow: row wrap;
}
.container > img{
width: auto;
height: auto;
max-width: 40px;
max-height: 40px
}
<!-- language: lang-html -->
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
</div>
<!-- end snippet -->
Does anyone know how to do this using keyframes or javascript or maybe a combination of these?
答案1
得分: 1
你可以在JavaScript中获取元素，并使用setTimeout函数逐渐添加类。
const div = document.getElementById("divID");
const children = div.childNodes;
const delay = 500; // 延迟的时间（毫秒）
// 你可能想要在某个地方执行的函数（也许是在onLoad事件中）
const childAppear = () => {
children.forEach((child) => {
setTimeout(() => {
child.classList.add("transition-class");
}, delay);
});
}
然后是CSS部分：
.container img {
opacity: 0;
transition: 1s; /* 过渡的时长 */
}
.transition-class {
opacity: 1;
/* 你想要用于过渡图像的其他样式 */
}
不要忘记给你的div元素添加一个ID，这样你就可以在JavaScript中语义化地访问它：
<div id="divID">图片</div>
英文:
You could get the elements in javascript and add a class gradually with a setTimeout function
const div = document.getElementById("divID");
const children = div.childNodes;
const delay = 500; // time in milliseconds for the delay
// Your function that you might want to execute somewhere (maybe onLoad)
const childAppear = () => {
children.forEach((child) => {
setTimeout(() => {
child.classList.add("transition-class");
}, delay);
}
}
Then for the CSS:
.container img {
opacity: 0;
transition: 1s; /* transition length */
}
.transition-class {
opacity: 100;
/* any other styles you want for the transitioned image */
}
Don't forget to add an ID to your div element so you can access semantically in JavaScript
<div id = "divID">IMAGES</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论