How to apply CSS transition on hide? - css

Question

I have a bootstrap navbar that on collapse displays the items outside of it. When collapsing I have a div that works as an overlay that covers the whole page, so the navbar menu does not stay on top of any content of the page. The problem happens when I hide the menu: the div disappears immediately and during the hiding transition of the menu it stays on top of the page's content.
I want to keep the menu transition, so how can I apply a transition to the div when it is hiding? I've tried a lot of approaches but all of them only apply the transition when the div shows and not when it hides.
Check this demo, please: https://codesandbox.io/s/d31eo
React (demo):
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 (demo):
.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

Can you please check the below link code? Hope it will work for you. We have moved all declarations of .overlay.open to .overlay and added transition to .overlay(Default State), we don't need to add transition in .overlay.open.
For smooth transition we have added transition in height and opacity in Default State
transition: opacity 0.4s ease-in-out, height 0.4s ease-in-out.
1. In Default state - .overlay:
height set to '0px' and opacity set to '0'.
2. In Open state - .overlay.open:
height set to '100%' and opacity set to '1'.
Please refer to this link: https://codesandbox.io/s/summer-microservice-6d4c6

Answer 2

Step 1:
Move the styles of the overlay to its base css definition. leave in the .open only the css which should change on open. In our case we will change the height, so add height:0 to base .ovelay css and height:100% to .overlay.open
Step 2:
Add a css transition (e.g. transition: height .5s ease) to the base css, and set tansition: none to .overlay.open. this way the transition will apply only when its not have .open class. So it wll openinstantly, and close animated.
Hopefully this was the desired output:
https://codesandbox.io/s/charming-drake-dbtce?file=/src/styles.css

Answer 3

There is no need for the overlapping div for cover full body. We can manage it by the CSS property.
Use the following code for solving your problem.
React code:
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 Code:
.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;
}
}