How come the cubic bezier timing function works flawlessly just on the first try when staggered transitioning element opacity over time with CSS and a touch of JS?

Question

How come the cubic bezier timing function works flawlessly just on the first try when staggered transitioning element opacity over time with CSS and a touch of JS?

I'm currently working on a menu overlay that expands to fill the screen when a user clicks a button in the corner. I'd like the menu items to fade in one by one, similar to the effect used on this website:

Most of the functionality is there, but I'm facing an issue where the menu items only fade in smoothly the first time the button is clicked. After that, they just appear suddenly (except for the first item). Can anyone help me figure out how to fix this?

You can view my code on CodePen.

Here's the HTML snippet:

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
<div id="menu"></div>
<div id="menu-button"></div>
<div id="menu-container">
    <div id="links">
        <a href="#Portfolio" id="portfolio">Portfolio</a><br />
        <a href="#Services" id="services">Services</a><br />
        <a href="#About" id="about">About</a><br />
        <a href="#Contact" id="contact">Contact</a><br />
    </div>
</div>

My CSS styling:

#menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    z-index: 1;
    background-color: #111;
    -webkit-transition: width 0.5s, height 0.5s;
            transition: width 0.5s, height 0.5s;
}

#menu.active {
    width: 100%;
    height: 100%;
}
...

Javascript function:

let menu = {
    div: document.getElementById('menu'),
    button: document.getElementById('menu-button'),
    container: document.getElementById('menu-container'),
    isExpanded: false,
    adjust: function() {
        menu.isExpanded = !menu.isExpanded;
        if (menu.isExpanded) {
            menu.div.classList.add("active");
            menu.button.classList.add("active");
            menu.container.classList.add("active");
        } else {
            menu.div.classList.remove("active");
            menu.button.classList.remove("active");
            menu.container.classList.remove("active");
        }
    }
}
let links = document.getElementById('links').childNodes; 
...

Note: Initially, I omitted mentioning that my original HTML uses Bootstrap's reset CSS. I have since added a link to a Bootstrap CDN.

html css css-transitions opacity cubic-bezier

Answer 1

Answer №1

The explanation provided in the initial response effectively clarifies the issue with your code.

An alternative solution involves making slight adjustments to your CSS code.

.active #portfolio {
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

.active #services {
  -webkit-transition: opacity 1.5s;
  transition: opacity 1.5s;
}

.active #about {
  -webkit-transition: opacity 2s;
  transition: opacity 2s;
}

.active #contact {
  -webkit-transition: opacity 2.5s;
  transition: opacity 2.5s;
}

To activate the transition only when the menu-item has the .active parent, simply add the .active class before the menu-item.

Check out the CODEPEN demo here!

Answer 2

The explanation provided in the initial response effectively clarifies the issue with your code.

An alternative solution involves making slight adjustments to your CSS code.

.active #portfolio {
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

.active #services {
  -webkit-transition: opacity 1.5s;
  transition: opacity 1.5s;
}

.active #about {
  -webkit-transition: opacity 2s;
  transition: opacity 2s;
}

.active #contact {
  -webkit-transition: opacity 2.5s;
  transition: opacity 2.5s;
}

To activate the transition only when the menu-item has the .active parent, simply add the .active class before the menu-item.

Check out the CODEPEN demo here!

Answer 3

Answer №2

Your issue stems from the fact that once you close the menu, the links take 2 seconds to fully transition to opacity: 0, based on the longest transition time set.

If you try to reopen the menu before 2 seconds have passed, it won't work properly. However, you can resolve this by reducing the transition time to a shorter duration after closing the menu.

Here is an example of how you can achieve this: JsFiddle

You can update your JavaScript code to implement this solution:

let menu = {
    div: document.getElementById('menu'),
    button: document.getElementById('menu-button'),
    container: document.getElementById('menu-container'),
    isExpanded: false,
    adjust: function() {
        menu.isExpanded = !menu.isExpanded;
        if (menu.isExpanded) {
            menu.div.classList.add("active");
            menu.button.classList.add("active");
            menu.container.classList.remove("finished");
            menu.container.classList.add("active");
        } else {
            menu.div.classList.remove("active");
            menu.button.classList.remove("active");
            menu.container.classList.add("finished");
            menu.container.classList.remove("active");
        }
    }
}

let links = document.getElementById('links').childNodes;

for (let i = 0; i < links.length; i += 1) {
    if (links[i].nodeName.toLowerCase() == 'a') {
        links[i].addEventListener('mouseup', menu.adjust);
    }
}  

menu.button.addEventListener('mousedown', menu.adjust);

Be sure to add the following CSS code as well:

#menu-container.finished>#links>a {
    -webkit-transition: opacity 0.1s;
            transition: opacity 0.1s;
}

Answer 4

Your issue stems from the fact that once you close the menu, the links take 2 seconds to fully transition to opacity: 0, based on the longest transition time set.

If you try to reopen the menu before 2 seconds have passed, it won't work properly. However, you can resolve this by reducing the transition time to a shorter duration after closing the menu.

Here is an example of how you can achieve this: JsFiddle

You can update your JavaScript code to implement this solution:

let menu = {
    div: document.getElementById('menu'),
    button: document.getElementById('menu-button'),
    container: document.getElementById('menu-container'),
    isExpanded: false,
    adjust: function() {
        menu.isExpanded = !menu.isExpanded;
        if (menu.isExpanded) {
            menu.div.classList.add("active");
            menu.button.classList.add("active");
            menu.container.classList.remove("finished");
            menu.container.classList.add("active");
        } else {
            menu.div.classList.remove("active");
            menu.button.classList.remove("active");
            menu.container.classList.add("finished");
            menu.container.classList.remove("active");
        }
    }
}

let links = document.getElementById('links').childNodes;

for (let i = 0; i < links.length; i += 1) {
    if (links[i].nodeName.toLowerCase() == 'a') {
        links[i].addEventListener('mouseup', menu.adjust);
    }
}  

menu.button.addEventListener('mousedown', menu.adjust);

Be sure to add the following CSS code as well:

#menu-container.finished>#links>a {
    -webkit-transition: opacity 0.1s;
            transition: opacity 0.1s;
}

How come the cubic bezier timing function works flawlessly just on the first try when staggered transitioning element opacity over time with CSS and a touch of JS?

Answer №1

Answer №2

Similar questions

Is it possible to eliminate the sticky class as you scroll down?

Creating square elements using only HTML and CSS

Overriding the !important declaration in inline styles within various CSS IDs and classes

Enhance your slideshow with a stylish fade effect

Having difficulty changing placeholder text style in Scss

How can a CSS class be inherited from a different file?

What is the best way to alternate between two CSS stylesheets when using jQuery-UI?

Apply the "selected" class to the menu located in the common header

Adjust background image size to fit the dimensions of the foreground content

The parallax background features a sleek design with crisp white borders framing the edges

Screening through the outgoing html documents

Arranging various JavaScript arrays

Types of Content in Solr Responses

Is there a way to extract the content within the HTML tags as well as the text enclosed within parentheses?

HTML links have been disabled

Incorporate JavaScript to include a new class and attribute

Customize button appearance within mat-menu in Angular versions 2 and above

Tips for adjusting the placement of enlarged images within colorbox

Can you explain the significance of this HTML code?

Angular 8 UI not displaying mockAPI data as expected