是否可以在滚动时为 flexbox 元素设置动画？答案

【问题标题】：Is it possible to animate flexbox elements on scroll?是否可以在滚动时为 flexbox 元素设置动画？
【发布时间】：2019-09-04 17:49:22
【问题描述】：

是否可以在滚动时为 flex 元素设置动画？

我正在努力实现这一目标：https://codepen.io/Sergiop79/pen/bxjGEe

使用下面的元素（在 flexbox 中设置样式），可以是整个“行”或单个“列”。

我还没有找到任何关于 Flexbox 的信息，所以我想知道它是否可能。谢谢！

<about id="about" class="row">
      <div class="col">
        <div class="about1">
          <img src="1-AB.svg">
        </div>
        <div class="about1a">
          <h3>About</h3>
          <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero.</p>
        </div>
      </div>
      <div class="col">
        <div class="about2">
          <img src="2-AB.svg">
        </div>
        <div class="about2a">
            <h3>Aboot</h3>
            <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero.</p>
          </div>
      </div>
      <div class="col">
        <div class="about3">
          <img src="3-AB.svg">
        </div>
        <div class="about3a">
            <h3>Abute</h3>
            <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero.</p>
        </div>
      </div>
    </about>

【问题讨论】：

标签： javascript css flexbox css-transitions

【解决方案1】：

您可以将它们的opacity 设置为0 和transform:transationY(100%) 并创建一个名为show 的类或具有opacity:1; 和transform:translateY(0); 属性的类

那么你将需要这个 JS 代码

    var columns = document.getElementsByClassName("col");
    document.addEventListener("scroll",function(){
        for(var i = 0; i < columns.length; i++){
           if(columns[i].getBoundingClientRect().top < window.innerHeight){
              columns[i].classList.add("show");
           }
        }
    });

.col{
width:100%;
height:300px;
background:#555;
border:1px solid #000;
margin-bottom:50px;
opacity:0;
transform:translateY(100%);
transition:opacity .5s, transform .5s;
}

.show{
opacity:1;
transform:translateY(0);
}

<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>

columns[i].getBoundingClientRect().top < window.innerHeight 检查滚动时窗口中是否显示div

【讨论】：