javascript - 框阴影过渡不适用于滚动

Question

当它滚动到页面上的内容时，我希望在导航上有一个投影，以便更容易地显示内容和导航之间的区别。投影也应应用过渡以使其更平滑。

在断点上方滚动后将框阴影应用于导航时，阴影过渡不起作用。但是，当将相同的样式应用于悬停选择器时，过渡会起作用。

我正在为元素使用 gatsby，但这是一个 react/js 问题，只是说如果有任何警告我应该知道在使用 gatsby 将其应用于元素时。

请注意，我正在使用 styled-components 来设置组件的样式。我正在使用条件渲染，使用 'CSS: ${condition && css-style}' 语法，它与样式组件一起使用。

我已经尝试过使用动画，效果很好，但每次在页面上滚动时它都会运行。

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

Answer 1

你需要做的是随着滚动位置逐渐改变box-shadow的不透明度。 Transition 是按时运行的，所以它不会给用户带来预期的体验——即我们可能会遇到用户在断点处停止滚动，然后 box-shadow 会慢慢出现的情况。如果 box-shadow 随着滚动出现，那将是一个更酷的体验。

太好了，您正在使用样式化的组件 - 这样我们就可以将一个 prop 传递给组件 Header，该组件将从我们将滚动位置保持为数字的应用程序状态中获取。

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

这样我们将包含一个断点并随着滚动改变框阴影的不透明度。

这是你的 working example