Переход Box-Shadow не работает при прокрутке

Мне нужна тень на навигации, когда она прокручивается по содержимому на странице, чтобы легче было показать разницу между содержимым и навигацией. Тень также следует применить с переходом, чтобы сделать ее более плавной.

При применении тени блока к навигации после прокрутки над точкой останова переход тени не работает. Однако переход работает при применении того же стиля к селектору наведения.

Я использую gatsby для проекта, но это проблема с реакцией / js, я просто говорю, есть ли какие-либо предостережения, которые я должен знать при применении этого к проекту с gatsby.

Обратите внимание, что я использую стилизованные компоненты для стилизации компонентов. Я использую условный рендеринг с использованием синтаксиса 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


reactjs javascript css styled-components gatsby
person M.kal    schedule 01.08.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Что вам нужно сделать, так это постепенно изменять непрозрачность тени блока с положением прокрутки. Переход выполняется вовремя, поэтому он не даст пользователю ожидаемого опыта - то есть у нас может возникнуть ситуация, когда пользователь перестанет прокручивать в точке останова, а затем тень появится медленно. Было бы намного круче, если бы тень блока появлялась при прокрутке.

Замечательно, что вы используете стилизованные компоненты - таким образом мы можем передать опору в заголовок компонента, который будет взят из состояния приложения, в котором мы сохраняем позицию прокрутки в виде числа.

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

Таким образом, мы добавим точку останова и изменим непрозрачность тени прямоугольника вместе с прокруткой.

Вот ваш рабочий пример

person olejniczag    schedule 01.08.2019
comment
Я думал об этом, но не знал, как реализовать эту функцию. Это сработало отлично, спасибо! - person M.kal; 01.08.2019