javascript - 是否可以在滚动时为 flexbox 元素设置动画?
问题描述
是否可以在滚动时为 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>
解决方案
您可以将它们设置opacity
为0
andtransform:transationY(100%)
并创建一个名为的类或具有andshow
属性的东西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>
wherecolumns[i].getBoundingClientRect().top < window.innerHeight
检查是否div
在滚动时显示在窗口中
推荐阅读
- javascript - Redux 状态条目哈希
- authorization - 身份验证和精细授权
- here-api - 我可以在 URL 中传递多少路点?我可以通过超过 100 个航点吗?
- php - 如何在 MAUTIC 电子邮件营销活动中发送 {contactfield=id} 等变量?
- java - Java 11 HttpClient 握手失败
- css - 如何使用 CSS 和 Flexbox 调整剩余项目的大小
- javascript - React Redux with Persist - 部署新的迭代没有冲突
- azure-active-directory - AADSTS50013:断言签名验证失败。[原因 - 未找到密钥。客户端使用的密钥指纹:'xxxx'
- google-chrome - 在 puppeteer 中更新 Chrome 版本
- vb.net - 为什么需要在将数据表绑定到数据视图之前为其命名?