What is the best way to toggle between display:none and display:block?

Question

What is the best way to toggle between display:none and display:block?

How can I delay the appearance of mobile nav items without using JS until the nav overlay fully expands for 0.4s?

In the non-overlay state, the top nav has a hamburger menu on the left and my name on the right with hidden nav links.

When in the overlay state, the hamburger menu changes to an x, the top nav covers the full page, and centralized nav links appear on the overlay.

Is it true that modern browsers will ignore animation or transition specifications if display: changes? How can I overcome this issue and delay the appearance of nav items until the overlay is fully expanded?

I found a working example here: https://codepen.io/KingKabir/pen/QyPwgG, but I'm unsure about their method?

I've attempted using visibility: and opacity: but they don't properly hide the nav elements in the non-overlay state, affecting the positioning of my name on the right side of the nav menu.

What adjustments should be made to ensure the nav elements only appear after the overlay has fully expanded?

View code snippets below:

  <nav class="nav_container" id="overlay">
    (HTML content)
  </nav>

    .cssstyles {
    /* CSS styles */
  }

Javascript snippet included for reference:

function mobileMenu() {
  // Javascript function
}

The desired outcome is for the nav_tab elements to appear after the full expansion of nav_container. However, currently, they appear prematurely before the full expansion occurs.

css animation css-transitions css-animations

Answer 1

Answer №1

By utilizing a combination of visibility, opacity, and max-height, you can smoothly transition an element from being visible to hidden, or vice versa. This approach involves setting the max-height property to 0 when the element is hidden, and to a value like Xpx (larger than the actual size of the element) when it's visible. This technique ensures that the element does not disrupt your layout in any way, as mentioned in your query.

For illustration purposes, consider this example:

var visible = document.querySelector(".visible");

function hide() {
  visible.classList.add("hidden");
}

visible.addEventListener("click", hide);

div {
  background-color: blue;
  padding: 40px;
  color: white;
  cursor: pointer;
  transition: all .1s ease;
}

.visible {
  visibility: visible;
  opacity: 1;
  max-height: 1000px;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  max-height: 0;
}

<div class="visible">Click to hide</div>

Answer 2

By utilizing a combination of visibility, opacity, and max-height, you can smoothly transition an element from being visible to hidden, or vice versa. This approach involves setting the max-height property to 0 when the element is hidden, and to a value like Xpx (larger than the actual size of the element) when it's visible. This technique ensures that the element does not disrupt your layout in any way, as mentioned in your query.

For illustration purposes, consider this example:

var visible = document.querySelector(".visible");

function hide() {
  visible.classList.add("hidden");
}

visible.addEventListener("click", hide);

div {
  background-color: blue;
  padding: 40px;
  color: white;
  cursor: pointer;
  transition: all .1s ease;
}

.visible {
  visibility: visible;
  opacity: 1;
  max-height: 1000px;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  max-height: 0;
}

<div class="visible">Click to hide</div>

Answer 3

Answer №2

If you want to create a delay for your animation, simply add another parameter called 'delay' to your transition. For example:

transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s;

This will start the animation after a 2-second delay.

To help you achieve your desired outcome, I've made some CSS adjustments as outlined below:

For the element .nav_container.open, replace the following lines:
```
max-height: 100%;
height: 200%;
```
with this single line:
```
min-height: 100vh;
```
This change ensures that the container expands to at least the height of the window.
For the element .nav_tab, switch from:
```
display: none;
```
to:
```
display: block;
opacity: 0;
```
By doing this, you can hide the links and incorporate an animation for revealing them.
Regarding the element .nav_tab.open, remove these lines:
```
display: block;
visibility: visible;
```
and insert these lines instead:
```
opacity: 1;
transition: all 0.6s linear 0.4s;
```
The duration of 0.6 seconds and a delay of 0.4 seconds ensure a smooth transition without rushing the expand effect of nav_container.

Take a look at the changes and confirm if they bring you closer to your intended design goal! ;)

Answer 4

If you want to create a delay for your animation, simply add another parameter called 'delay' to your transition. For example:

transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s;

This will start the animation after a 2-second delay.

To help you achieve your desired outcome, I've made some CSS adjustments as outlined below:

For the element .nav_container.open, replace the following lines:
```
max-height: 100%;
height: 200%;
```
with this single line:
```
min-height: 100vh;
```
This change ensures that the container expands to at least the height of the window.
For the element .nav_tab, switch from:
```
display: none;
```
to:
```
display: block;
opacity: 0;
```
By doing this, you can hide the links and incorporate an animation for revealing them.
Regarding the element .nav_tab.open, remove these lines:
```
display: block;
visibility: visible;
```
and insert these lines instead:
```
opacity: 1;
transition: all 0.6s linear 0.4s;
```
The duration of 0.6 seconds and a delay of 0.4 seconds ensure a smooth transition without rushing the expand effect of nav_container.

Take a look at the changes and confirm if they bring you closer to your intended design goal! ;)

What is the best way to toggle between display:none and display:block?

Answer №1

Answer №2

Similar questions

Challenge encountered when trying to add overlay hover effect on image cards

Using jQuery to Implement Car Turn Signals (Blinkers)

Center-align the text in mui's textfield

Easily style Angular directives (whether they are custom or built-in) using the native handle for CSS

Use custom styles or CSS for the file input element: <input type="file">

Unable to set the width for a div element within the bootstrap grid layout

Adjust the location of the scrollbar without affecting the alignment of the text

Methods to prevent images from spilling over into divs?

What is the best approach to dynamically bind a style property in Vue.js 3?

Aligning the Bootstrap navbar to the right causes the items to shift to the left

Ensure the vertical dimension of the webpage is properly maintained

Fixing the issue: "Tricky situation with JavaScript not working within Bootstrap 4's div tag while JS functions properly elsewhere"

Enhancing PrimeNG Components with Custom CSS Styles

In Stripe.js, the background color and height of the credit card input cannot be customized

Obtaining the calculated background style on Firefox

Tips on how to properly position the navigation bar within a wrapper element

spinning div content in a manner reminiscent of a roulette wheel

Photo positioned on top of the form with Bootstrap 5

Hiding CheckBox items within a CheckBoxList control in ASP.NET

Is there a way to change the background color of a redirected page by clicking on a tag?