如何在隐藏上应用 CSS 过渡？

Question

我有一个引导程序navbar，它在折叠时会显示它之外的项目。折叠时，我有一个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=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMjA3fDB8MXxzZWFyY2h8Nnx8bmF0dXJhbHx8MHx8fA&ixlib=rb-1.2.1&q=80&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;
  }
}

Answer 1

你能检查下面的链接代码吗？希望它对你有用。我们已将.overlay.open 的所有声明移至.overlay 并添加transition 至.overlay（默认状态），我们不需要添加.overlay.open 中的strong>过渡。

为了平滑过渡，我们在默认状态下添加了高度和不透明度的过渡

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

Answer 2

第 1 步：

将叠加层的样式移至其基本 css 定义。在.open 中只留下应该在打开时更改的css。在我们的例子中，我们将改变高度，所以将height:0添加到基础.ovelaycss和height:100%到.overlay.open

第 2 步：

向基本 css 添加一个 css 过渡（例如 transition: height .5s ease），并将 tansition: none 设置为 .overlay.open。这样，只有当它没有 .open 类时才会应用转换。所以它会立即打开，并以动画方式关闭。

希望这是期望的输出： https://codesandbox.io/s/charming-drake-dbtce?file=/src/styles.css

Answer 3

覆盖全身不需要重叠的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=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMjA3fDB8MXxzZWFyY2h8Nnx8bmF0dXJhbHx8MHx8fA&ixlib=rb-1.2.1&q=80&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;
  }
}