多框css动画

6pp0gazn 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(107)

我得到了一个页面，显示相同大小的多个框（框的数量尚未固定，这将取决于数据库中的数据数量）。
我想用css动画一个接一个地显示每个盒子。
有没有可能不知道有多少个盒子会被展示出来？
需要帮助，谢谢。

#list {
    margin: 2em auto;
    padding: 0;
    max-width: 70%;
    list-style: none;
    height: 100%;
}
#list a{
    color: #ccc;
}
#list h5 {
    color:#fff;
    margin-bottom:30px;
}
#list li {
    float: left;
    width: 250px;
    height: 100px;
    background: #012257;
    text-align: center;
    line-height: 20px;
    opacity: 100;
    border-radius: 10px;
    margin-bottom:20px;
    margin-right:30px;
    animation: fadeIn 5s 1 ease-in;
    animation-duration: 5s;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, -20%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

个字符

css

来源：https://stackoverflow.com/questions/77769736/multiple-box-css-animation

1条答案

按热度按时间

t2a7ltrp1#

我在想，也许你可以在从数据库中获取结果后，为每个在屏幕上渲染的<li>添加一个动画延迟。
我相信PHP脚本将在服务器上运行，但您需要在客户端使用AJAX从端点获取数据并将其嵌入到<li>标记中。
当你这样做的时候，它可能看起来像这样。

<body>
    
    <ul id="dataList"></ul>
    
    <script>
      // Function to fetch JSON data and update the DOM
      async function fetchData() {
        try {
          const response = await fetch('your_json_data.json'); // Replace with your JSON file or API endpoint
          const data = await response.json();
    
          const dataList = document.getElementById('dataList');
    
          // Iterate through the data and create <li> tags
          data.forEach((item, index) => {
            const li = document.createElement('li');
            li.textContent = `Name: ${item.name}, Age: ${item.age}`; // Adjust properties based on your JSON structure
    
            // Add inline style with CSS variable --index
            li.style.setProperty('--index', index);
    
            dataList.appendChild(li);
          });
    
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      }
    
      // Call the fetchData function when the page loads
      window.onload = fetchData;
    </script>
    
    </body>

字符串
在你的CSS中，你需要在<li>选择器上设置一个animation-delay。它看起来像这样。

#list li {
    /* Other style declarations.. */
    animation: fadeIn 5s 1 ease-in;
    animation-delay: calc(var(--index) * 0.5s);
}

型
这里的想法是使用--index变量来使每个项目按顺序一个接一个地动画化。
让我知道如果它工作，干杯！

赞(0）回复(0）举报 2024-01-09

我来回答

多框css动画

1条答案

相关问题

热门标签

最新问答