Блог

У меня есть загрузчик navbar , который при сворачивании отображает элементы за его пределами. При сворачивании у меня есть a div , который работает как наложение, которое покрывает всю страницу, поэтому navbar меню не остается поверх любого содержимого страницы. Проблема возникает, когда я скрываю меню: div оно немедленно исчезает, и во время скрытия перехода меню оно остается поверх содержимого страницы.

Я хочу сохранить переход меню, так как же я могу применить переход к div меню, когда оно скрывается? Я перепробовал много подходов, но все они применяют переход только тогда, когда div он отображается, а не когда он скрывается.

Проверьте эту демонстрацию, пожалуйста: https://codesandbox.io/s/d31eo

Реакция (демонстрация):

 import React, { Component } from "react";

import { Container, Nav, Navbar } from "react-bootstrap";

import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

export default class NavBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      data: []
    };
  }

  componentDidMount() {
    this.setState({
      data: [
        { name: "Test1" },
        { name: "Test2" },
        { name: "Test3" },
        { name: "Test4" }
      ]
    });
  }

  onClick = () => {
    this.setState({ open: !this.state.open });
  };

  render() {
    return (
      <>
        <Navbar
          className={`nav ${this.state.open ? "open" : ""}`}
          expand="lg"
          sticky="top"
        >
          <Container>
            <Navbar.Toggle aria-controls="navbar-menu" onClick={this.onClick} />
            <Navbar.Collapse id="navbar-menu">
              <Nav className="ml-auto">
                {this.state.data.map((category) => (
                  <Nav.Link href="#" key={`category-${category.name}`}>
                    <span className="link">{category.name}</span>
                  </Nav.Link>
                ))}
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
        <div className={`overlay ${this.state.open ? "open" : ""}`} />
        <img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?crop=entropyamp;cs=tinysrgbamp;fit=maxamp;fm=jpgamp;ixid=MXwxMjA3fDB8MXxzZWFyY2h8Nnx8bmF0dXJhbHx8MHx8fAamp;ixlib=rb-1.2.1amp;q=80amp;w=1080" />
      </>
    );
  }
}
 

CSS (демо):

 .nav {
  min-height: 55px;
  width: 100%;
  background-color: white;
  border-bottom: 1px solid #979797;
}

.link {
  font-size: 14px;
  color: #3e433e;
  line-height: 17px;
  padding: 5px;
  text-transform: uppercase;
}

.link:hover {
  color: #000000;
  text-decoration: none;
}

.overlay {
  position: fixed;
}

@media (max-width: 1170px) {
  .collapsing {
    position: absolute !important;
    z-index: 3;
    width: 100%;
    top: 75px;
  }

  .collapse.show {
    display: block;
    position: absolute;
    z-index: 3;
    width: 100%;
    top: 75px;
  }

  .overlay.open {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 2;
    top: 55px; /* navbar min-heigth */
    left: 0;
    background-color: white;
  }
}
 

Не могли бы вы проверить приведенный ниже код ссылки? Надеюсь, это сработает для вас. Мы переместили все объявления .overlay.open в .overlay и добавили переход в .overlay (состояние по умолчанию), нам не нужно добавлять переход .overlay.open .

Для плавного перехода мы добавили переход по высоте и непрозрачности в состояние по умолчанию

transition: opacity 0.4s ease-in-out, height 0.4s ease-in-out .

1. В состоянии по умолчанию — .overlay :

height установите значение ‘0px’ и opacity установите значение ‘0’.

2. В открытом состоянии — .overlay.open :

height установите значение «100%» и opacity установите значение «1».

Пожалуйста, обратитесь к этой ссылке: https://codesandbox.io/s/summer-microservice-6d4c6

Шаг 1:

Переместите стили наложения в его базовое определение css. оставьте .open только тот css, который должен измениться при открытии. В нашем случае мы изменим высоту, поэтому добавьте height:0 к базовому .ovelay css и height:100% к .overlay.open

Шаг 2:

Добавьте css-переход (например transition: height .5s ease ) к базовому css и установите tansition: none значение .overlay.open . таким образом, переход будет применяться только тогда, когда у него нет .open класса. Таким образом, он будет открываться мгновенно и закрываться анимированным.

Надеюсь, это был желаемый результат: https://codesandbox.io/s/charming-drake-dbtce?file=/src/styles.css

Нет необходимости в перекрывающемся div для покрытия всего тела. Мы можем управлять этим с помощью свойства CSS.

Используйте следующий код для решения вашей проблемы.

Реагирующий код:

 import React, { Component } from "react";

import { Container, Nav, Navbar } from "react-bootstrap";

import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

export default class NavBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      data: []
    };
  }

  componentDidMount() {
    this.setState({
      data: [
        { name: "Test1" },
        { name: "Test2" },
        { name: "Test3" },
        { name: "Test4" }
      ]
    });
  }

  render() {
    return (
      <>
        <Navbar
          className={`nav ${this.state.open ? "open" : ""}`}
          expand="lg"
          sticky="top"
        >
          <Container>
            <Navbar.Toggle aria-controls="navbar-menu" />
            <Navbar.Collapse id="navbar-menu">
              <Nav className="ml-auto">
                {this.state.data.map((category) => (
                  <Nav.Link href="#" key={`category-${category.name}`}>
                    <span className="link">{category.name}</span>
                  </Nav.Link>
                ))}
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
        <img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?crop=entropyamp;cs=tinysrgbamp;fit=maxamp;fm=jpgamp;ixid=MXwxMjA3fDB8MXxzZWFyY2h8Nnx8bmF0dXJhbHx8MHx8fAamp;ixlib=rb-1.2.1amp;q=80amp;w=1080" />
      </>
    );
  }
}
 

Код CSS:

 .nav {
  min-height: 55px;
  width: 100%;
  background-color: white;
  border-bottom: 1px solid #979797;
}

.link {
  font-size: 14px;
  color: #3e433e;
  line-height: 17px;
  padding: 5px;
  text-transform: uppercase;
}

.link:hover {
  color: #000000;
  text-decoration: none;
}

@media (max-width: 991px) {
  #navbar-menu {
    position: fixed;
    top: 57px;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 0 10px;
    height: 0 !important;
    transition: height 0.3s ease-out !important;
    -webkit-transition: height 0.3s ease-out !important;
    overflow: hidden;
  }
  #navbar-menu.show {
    height: calc(100vh - 57px) !important;
  }
}