如何在页面滚动到特定位置时实现div透明度的渐变效果？

Question

求问，有没有懂页面到一定位置透明度渐显div的全代码

只能做出一半，就是到一定位置div渐显，但是并不会改JS动画，div是先存在再从0-100透明

Answer 1

刚好项目用到了 分享你一下

import React, { useEffect, useRef, useState } from 'react';

/** 根据某个元素滚动的底部距离顶部的距离， 更改 蒙层 透明度的 动画 */
const useCustomMaskOpacityAnimation = () => {
  // 创建一个引用来保存 监听某个元素滚动的底部距离顶部的距离 DOM 元素
  const scrollElementRef = useRef<HTMLDivElement>(null);
  // 创建一个状态来保存透明度
  const [maskOpacity, setMaskOpacity] = useState(0);

  useEffect(() => {
    // 获取特定元素
    const element = scrollElementRef.current;

    // 定义一个函数来处理滚动事件
    const handleScroll = () => {
      if (element) {
        // 计算元素的底部距离顶部的距离
        const elementBottom = element.getBoundingClientRect().bottom;
        const distanceFromTop = window.innerHeight - elementBottom;
        // 设置透明度，距离顶部越远，透明度越高
        const newOpacity = Math.min(1, distanceFromTop / window.innerHeight);
        setMaskOpacity(newOpacity);
      }
    };

    // 添加滚动事件监听器
    window.addEventListener('scroll', handleScroll);

    // 清除监听器的返回函数
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return { maskOpacity, scrollElementRef };
};

export default useCustomMaskOpacityAnimation;

Answer 2

1. 创建目标 div，将透明度 opacity 属性设置为 0.当然如果透明度为 0 可以加一个 display:none; 直接不渲染。
2. 用 JS 监听滑动，当页面滑动到目标位置，开始计算位置对应的透明度。

window.addEventListener('scroll', function () {
  var el = document.getElementById('target')
  var opacity = 0.33 // 这里根据不同条件进行透明度计算

  if (opacity === 0) {
    el.style.opacity = opacity
    el.style.display = 'none'
  } else {
    el.style.opacity = opacity
  }
})

Answer 3

可能您对前端不怎么了解，我就以你不了解的角度给你说一下。

设置过度

您的需求应该不是直接从透明变成正常，所以会存在过度，而过度的话你需要在css里先进行设置，假代码如下；

<style>
.msg {
/* all的话意味着所有的css属性都应用该过度，现在如果你只是透明度的话，可以写`opacity `； 0.5s表示过度事件，ease则表示过度的动画曲线*/
    transition: all 0.5s ease;
    opacity: 0;
}
</style>
<div class="msg">message</div>

切记过度必须要先设置，因为如果你使用javascript来设置的话会没有过度效果。

监听元素的位置

比较麻烦的方式是监听scroll事件，这个上面的朋友已经说了。如果不需要兼容的话，可以使用intersectionObserver来进行监听，这个我无法在这里给你写一个例子，你可以到掘金等去搜索一下。

使用js来设置css

先获取DOM对象，再进行设置

// 获取DOM对象
let dom = document.querySelector("选择器")；
// 修改css属性前面的 `dom.style`是固定的，它就是一个对象，您调用对象赋值
dom.style.opacity = 1;