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

How can you capture the VIRTUAL keyCode from a form input?

The CSS child selector seems to be malfunctioning as it is affecting all descendants of the specified type

Arrangement of Bootstrap card components

All I desire is to eliminate the term "class" from the text

Achieving opacity solely on the background within a div class can be accomplished by utilizing CSS properties such

Image Carousel Extravaganza

"Hiding elements with display: none still occupies space on the

Moving object sideways in 100px intervals

Unable to set the correct title view for mobile devices

What is the best way to position this dropdown menu component directly under a specific section of my navbar in a React application?

Looking for assistance with aligning an image in a <td> cell that doubles as a link?

Stop form from submitting on bootstrap input, still check for valid input

Implemented an HTML hyperlink element precisely positioned

Change the button text without the need for a click, automatically switch

Using a custom HTML file as a container in an Android WebView

In AngularJS, the process of replacing text using a filter can be achieved by following

The E.js Template encountered an error with an unexpected token "else"

Retrieving list item contents using PHP DOM scraping

Launching Android Calendar app using Intent from a web browser (Chrome)

Some CSS styles are not displaying correctly within an iframe