滚动时阴影过渡效果无法实现

Question

当页面导航滚动到内容上方时，我希望导航显示投影效果，以更容易区分内容和导航。投影效果还应该使用过渡效果，使其更加平滑。

当在滚动超过断点之后将box-shadow应用于导航时，投影的过渡效果不起作用。但是，当将相同样式应用于悬停选择器时，过渡效果是有效的。

我正在使用gatsby进行项目开发，但这是一个react/js问题，只是提一下，如果在将其应用于gatsby项目时有任何注意事项，请告诉我。

请注意，我正在使用styled-components为组件进行样式设置。我使用“CSS：${condition && css-style}”语法进行条件渲染，它可以与styled-components一起使用。

我已经尝试使用动画，它可以工作，但是每次滚动页面时都会运行它。

class App extends Component {
  constructor() {
    super();
    this.state = {
      scrollPos: 0
    };
  }

  componentDidMount() {
    window.addEventListener("scroll", this.updateScroll);
    this.updateScroll();
  }

  componentWillUnmountt() {
    window.removeEventListener("scroll", this.updateScroll);
  }

  updateScroll = () =>
    this.setState({ scrollPos: document.documentElement.scrollTop });

  render() {
    let breakpointScroll = 20;

    const Header = styled.div`
      position: fixed;
      width: 100vw;
      height: 90px;
      background-color: white;
      font-size: 26px;
      color: coral;
      text-align: center;
      transition: all 200ms ease;

      /* Problem here */
      box-shadow: ${this.state.scrollPos >= breakpointScroll &&
        "0px 1px 5px rgba(0, 0, 0, 0.25)"};

      /* This seems to work perfect */
      :hover {
        box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
      }
    `;

    return (
      <>
        <Header>Header</Header>

        <Text>Scroll position: {this.state.scrollPos}</Text>

        {/* IGNORE, content for scroll */}
        <Box />
        <Box backgroundColor="lightblue" />
        <Box />
        {/* IGNORE, content for scroll */}
      </>
    );
  }
}

Codesandbox链接：https://codesandbox.io/s/wizardly-cray-44mri

这是一个关于IT技术的链接，可以访问并了解更多相关信息。请点击以上链接以进入链接页面。

- M.kal

Answer 1

你需要做的是随着滚动位置逐渐改变盒子阴影的不透明度。过渡是按时间操作的，所以它无法给用户预期的体验 - 例如，当用户在断点处停止滚动时，盒子阴影将会缓慢出现。如果随着滚动出现盒子阴影会是一种更酷的体验。

很棒你正在使用样式组件 - 这样我们就可以向组件Header传递一个属性，该属性将从应用程序状态中获取滚动位置作为数字。

box-shadow: ${props =>
    `0px 1px 5px rgba(0, 0, 0, ${
      props.scrollPos >= breakpointScroll
        ? `0.25`
        : 0.0125 * props.scrollPos
    })`};

这样我们可以在滚动时包含断点并改变盒子阴影的透明度。

下面是您的工作示例

- olejniczag

---

我之前考虑过这个特性，但不知道如何实现。这个方法完美地解决了问题，谢谢！ - M.kal