javascript - 延迟框淡入动画

标签 javascript html css sass

当用户向下滚动网站时，我创建了单个元素 (.boxes > div) 的淡入效果。我使用 Javascript 检查元素是否刚刚滚动到 View 中，然后添加类 .fadeInUp 以添加动画效果。

这就是我如何使用 animation-delay 在另一个元素之后淡入另一个元素:

.fadeInUp {
    & + .fadeInUp {
        animation-delay: 300ms;
        & + .fadeInUp {
            animation-delay: 600ms;
            & + .fadeInUp {
                animation-delay: 900ms;
                & + .fadeInUp {
                    animation-delay: 1200ms;
                    & + .fadeInUp {
                        animation-delay: 1500ms;
                    }
                }
            }
        }
    }

    opacity: 0;
    animation: fadeInUp 1000ms forwards;
}

但是，我想缩短我的 SCSS 代码以选择具有相同类名的下一个兄弟类，因为如果我向 HTML 部分添加框，我也会需要在 SCSS 部分添加 animation-delay。

问题:

是否可以选择在不知道会有多少个框的情况下使用原生 CSS(或 SCSS 替代)来缩短此行为？有点像

& + * { ... }

但特定于 .fadeInUp 类，并且每个下一个兄弟类都将 animation-delay 值增加 300 毫秒？

我创建了这支笔来演示我的问题并使其更加清晰:

代码笔:Delayed Boxes FadeIn-Animation

enter image description here

最佳答案

据我所知，我认为使用纯 CSS 解决方案无法做到这一点。

将来这可能是您正在寻找的解决方案:stackoverflow.com/questions/43539203/use-css-counter-in-calc . 现在，我将在您的循环中添加一个简单的 e.style.animationDelay=i*300+"ms"; 并让 javascript 执行...“肮脏的工作”。

function inView(el) {
    let box = el.getBoundingClientRect();
    return box.top < window.innerHeight && box.bottom >= 0;
}

const boxes = document.querySelectorAll('.boxes >  div');


window.onscroll = (w) => {
  boxes.forEach((e, i) => {
    e.style.animationDelay=i*300+"ms";
    if (inView(e)) {
        e.classList.add('fadeInUp');
    }

  });
}
body {
  height: 2000px;
  display: grid;
  justify-items: center;
}

.boxes {
  margin-top: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 300px;
  grid-gap: 30px;
  justify-items: center;
  width: 80%;
}
  
.boxes div {
  height: 300px;
  width: 300px;
  box-shadow: 0 0 15px #ccc;
  background-image: url(https://images.unsplash.com/photo-1542141372-98a047557466?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  background-size: cover;
}

.boxes div:nth-child(2) {
  background-image: url(https://images.unsplash.com/photo-1522057306606-8d84daa75e87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(3) {
  background-image: url(https://images.unsplash.com/photo-1505870136463-c17bc84b30a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(4) {
  background-image: url(https://images.unsplash.com/photo-1524419986249-348e8fa6ad4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(5) {
  background-image: url(https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(6) {
  background-image: url(https://images.unsplash.com/photo-1514828980084-9462f7d03afc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}    

.fadeInUp {
  opacity: 0;
  animation: fadeInUp 1000ms forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
<html>
  <body>
    <div class="boxes">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

P.S. 如何使用:nth-child(n+...) 来创建类似的结果？ 像这样的东西:

.boxes div:nth-child(3n+1){
  animation-delay:300ms;
}

.boxes div:nth-child(3n+2){
  animation-delay:600ms;
}

.boxes div:nth-child(3n+3){
  animation-delay:900ms;
}


function inView(el) {
    let box = el.getBoundingClientRect();
    return box.top < window.innerHeight && box.bottom >= 0;
}

const boxes = document.querySelectorAll('.boxes >  div');


window.onscroll = (w) => {
  boxes.forEach((e, i) => {
    if (inView(e)) {
        e.classList.add('fadeInUp');
    }
  });
}
body {
  height: 2000px;
  display: grid;
  justify-items: center;
}

.boxes {
  margin-top: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 300px;
  grid-gap: 30px;
  justify-items: center;
  width: 80%;
}
  
.boxes div {
  height: 300px;
  width: 300px;
  box-shadow: 0 0 15px #ccc;
  background-image: url(https://images.unsplash.com/photo-1542141372-98a047557466?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  background-size: cover;
}

.boxes div:nth-child(2) {
  background-image: url(https://images.unsplash.com/photo-1522057306606-8d84daa75e87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(3) {
  background-image: url(https://images.unsplash.com/photo-1505870136463-c17bc84b30a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(4) {
  background-image: url(https://images.unsplash.com/photo-1524419986249-348e8fa6ad4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(5) {
  background-image: url(https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(6) {
  background-image: url(https://images.unsplash.com/photo-1514828980084-9462f7d03afc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}    

.fadeInUp {
  opacity: 0;
  animation: fadeInUp 1000ms forwards;
}

.boxes div:nth-child(3n+1){
  animation-delay:300ms;
}

.boxes div:nth-child(3n+2){
  animation-delay:600ms;
}

.boxes div:nth-child(3n+3){
  animation-delay:900ms;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
<html>
  <body>
    <div class="boxes">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

关于javascript - 延迟框淡入动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59602928/

上一篇：javascript - 使html成为标签href等待onclick中的异步函数返回？

下一篇：javascript - CSS 显示 :block property error or behaving differently

相关文章：

javascript - 当您通过 jQuery 更改 onChange() 时，如何使 onChange() 工作？

javascript - 条件在 javascript 中不起作用

javascript - 来自同一类动态列表的函数

html - 用于元素轮播的 CSS(容器具有固定宽度，可滚动区域具有无限宽度)

javascript - 如何在另一个开始之前定位并结束一个 jquery 事件？

javascript - 具有等间距 DIV 的流体宽度 + 最后一行左对齐

javascript - 如何在javascript中转换日期列值，以及如何增加此日期变量？

javascript - Ionic 应用程序在初始化完成之前开始工作

html - 填充底部在 IE 8 和 IE 9 中不起作用

javascript - 检测点击任何子节点并在 JavaScript 中获取其 ID 属性

©2024 IT工具网  联系我们