<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#show {
width: 500px;
height: 350px;
background-color: aqua;
margin: 1000px auto 0 auto;
}
.show {
animation: loading 2s linear;
}
@keyframes loading {
from {
opacity: 0;
transform: translate(-100%, 0);
}
to {
opacity: 1;
transform: translate(0, 0);
}
}
</style>
</head>
<body>
<p id="show"></p>
<script>
// classList.add( newClassName )；
// 添加新的类名，如已经存在，取消添加
// classList.contains( oldClassName );
// 确定元素中是否包含指定的类名，返回值为true 、false；
// classList.remove( oldClassName )；
// 移除已经存在的类名;
// classList.toggle( className )；
// 如果classList中存在给定的值，删除它，否则，添加它；
// classList.replace( oldClassName，newClassName )；
// 类名替换
// window.onscroll = function () {
// let show = document.getElementById('show');
// // 获取浏览器窗口可视化高度
// let clientH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// // 获取show元素顶部到浏览器窗口顶部的距离
// let showTop = show.getBoundingClientRect().top;
// // 如果距离小于可视化窗口高度，就给show元素添加动画效果
// if (showTop <= clientH) {
// show.classList.add('show');
// } else {
// show.classList.remove('show');
// }
// };
window.addEventListener('scroll', () => {
let show = document.getElementById('show');
// 获取浏览器窗口可视化高度
let clientH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// 获取show元素顶部到浏览器窗口顶部的距离
let showTop = show.getBoundingClientRect().top;
// 如果距离小于可视化窗口高度，就给show元素添加动画效果
if (showTop <= clientH) {
show.classList.add('show');
} else {
show.classList.remove('show');
}
})
</script>
</body>
</html>
