如何在一个元素出现在屏幕上后立即更改它的 css 属性答案

【问题标题】：How to change css properties of one element as soon it shows up on the screen如何在一个元素出现在屏幕上后立即更改它的 css 属性
【发布时间】：2020-09-04 00:05:56
【问题描述】：

一个问题，我见过一些网站，当您向下滚动页面并显示一些元素时，这些元素开始修改它的属性，如大小和位置。当您再次向上滚动时，这些元素会恢复到它们原来的大小和位置。

当元素出现在屏幕上时，有没有办法修改css属性？

【问题讨论】：

他们通常会改变元素的类。
Element.classList.add('someClass')

标签： javascript html css scroll size

【解决方案1】：

This youtube tutorial may help you out.

This project will give you the code you need.

下面是一个例子。

.animation1 {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
.animation2 {
  width: 100px;
  height: 100px;
  background-color: red;
 }
.space{
height:150vh;
}
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<div class="animation1"></div>
<div class="space"></div>
<div class="animation2" data-aos="fade-up"
     data-aos-anchor-placement="center-bottom"
     data-aos-duration="2000">
</div>
<script>
  AOS.init();
</script>

【讨论】：