What is the best way to smoothly transition an element into view, then make it disappear seamlessly by fading it

Question

What is the best way to smoothly transition an element into view, then make it disappear seamlessly by fading it

Issue

My current code features a <button> that, upon a single click, updates the class of a <div> element to "fade-in" and inserts it into the DOM. This action causes the <div> to visually fade in once it's in the DOM. However, if I click the button twice rapidly while the <div> is already present in the DOM, the element fades out and in before being removed.

Desired Outcome

My goal is for the <div> to fade out and be removed from the DOM with the initial click, and then fade in and be reinserted into the DOM with the second click. I want the visual effects to align with the DOM manipulation and prevent the fade-out and fade-in confusion caused by rapid clicking.

Resolution Approach

To address this issue, I have made multiple attempts with Promises, but unfortunately, none have been successful. As I am relatively new to JavaScript, I am uncertain whether my use of Promises is incorrect or if there are flaws in my overall approach. Any guidance or assistance would be greatly appreciated.

javascript html css css-animations

Answer 1

Answer №1

I have acknowledged @nem0z's response and also wanted to contribute an extended solution in response to my query below his answer (regarding how to modify the animation while it is still in progress). The solution involves utilizing the clearTimeout() function to prevent the execution of the code within the setTimeout().

const container = document.createElement("div");

let toggled = false;
let activeAnimation = false;

const button = document.querySelector("button");
button.addEventListener("click", event => {
  if (activeAnimation) {
    clearTimeout(timeoutID);
  }
  toggled = !toggled;
  activeAnimation = true;
  if (toggled) {
    container.setAttribute("class", "fade-in");
    button.parentElement.insertBefore(container, button.nextSibling);
    timeoutID = setTimeout(() => {
      activeAnimation = false;
    }, 500)
  } else {
    container.setAttribute("class", "fade-out");
    timeoutID = setTimeout(() => {
      container.remove();
      activeAnimation = false;
    }, 500)
  }
})

div {
    width: 100px;
    height: 100px;
    background-color: black;
}

.fade-in {
    animation: fade-in 500ms linear;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-out {
    animation: fade-out 500ms linear;
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    
    100% {
        opacity: 0;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../CSS/Test.css">
    <script src="../../JS/Test.js" async></script>
    <title>Document</title>
</head>
<body>
    <button> Fade In / Fade Out </button>
</body>
</body>
</html>

Answer 2

I have acknowledged @nem0z's response and also wanted to contribute an extended solution in response to my query below his answer (regarding how to modify the animation while it is still in progress). The solution involves utilizing the clearTimeout() function to prevent the execution of the code within the setTimeout().

const container = document.createElement("div");

let toggled = false;
let activeAnimation = false;

const button = document.querySelector("button");
button.addEventListener("click", event => {
  if (activeAnimation) {
    clearTimeout(timeoutID);
  }
  toggled = !toggled;
  activeAnimation = true;
  if (toggled) {
    container.setAttribute("class", "fade-in");
    button.parentElement.insertBefore(container, button.nextSibling);
    timeoutID = setTimeout(() => {
      activeAnimation = false;
    }, 500)
  } else {
    container.setAttribute("class", "fade-out");
    timeoutID = setTimeout(() => {
      container.remove();
      activeAnimation = false;
    }, 500)
  }
})

div {
    width: 100px;
    height: 100px;
    background-color: black;
}

.fade-in {
    animation: fade-in 500ms linear;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-out {
    animation: fade-out 500ms linear;
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    
    100% {
        opacity: 0;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../CSS/Test.css">
    <script src="../../JS/Test.js" async></script>
    <title>Document</title>
</head>
<body>
    <button> Fade In / Fade Out </button>
</body>
</body>
</html>

Answer 3

Answer №2

In my code, I utilize a variable called inAnimation which is initially set to true when an animation is triggered, and then set to false at the completion of the animation utilizing setTimeout(f, animationDuration):

To make the issue more visible, I have set the animation duration to 1000ms.

Here is the part of the code that needs to be changed:

const container = document.createElement("div");

let toggled = false;
let inAnimation = false; // is div currently animated

const button = document.querySelector("button");
button.addEventListener("click", event => {
    if(inAnimation) return; // check if there is an ongoing animation

  if (!toggled) { 

    inAnimation = true;
    container.setAttribute("class", "fade-in");
    
    button.parentElement.insertBefore(container, button.nextSibling);
    setTimeout(() => {
        inAnimation = false; // marks end of animation
    }, 1000)

  } else if(!inAnimation) {
    inAnimation = true;
    container.setAttribute("class", "fade-out");

    setTimeout(() => {
        inAnimation = false; // marks end of animation
        container.remove();
    }, 1000)
  }

  toggled = !toggled; 
})

div {
    width: 100px;
    height: 100px;
    background-color: black;
}

.fade-in {
    animation: fade-in 1000ms linear;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-out {
    animation: fade-out 1000ms linear;
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../CSS/Test.css">
    <script src="../../JS/Test.js" async></script>
    <title>Document</title>
</head>
<body>
    <button> Fade In / Fade Out </button>
</body>
</body>
</html>

Answer 4

In my code, I utilize a variable called inAnimation which is initially set to true when an animation is triggered, and then set to false at the completion of the animation utilizing setTimeout(f, animationDuration):

To make the issue more visible, I have set the animation duration to 1000ms.

Here is the part of the code that needs to be changed:

const container = document.createElement("div");

let toggled = false;
let inAnimation = false; // is div currently animated

const button = document.querySelector("button");
button.addEventListener("click", event => {
    if(inAnimation) return; // check if there is an ongoing animation

  if (!toggled) { 

    inAnimation = true;
    container.setAttribute("class", "fade-in");
    
    button.parentElement.insertBefore(container, button.nextSibling);
    setTimeout(() => {
        inAnimation = false; // marks end of animation
    }, 1000)

  } else if(!inAnimation) {
    inAnimation = true;
    container.setAttribute("class", "fade-out");

    setTimeout(() => {
        inAnimation = false; // marks end of animation
        container.remove();
    }, 1000)
  }

  toggled = !toggled; 
})

div {
    width: 100px;
    height: 100px;
    background-color: black;
}

.fade-in {
    animation: fade-in 1000ms linear;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-out {
    animation: fade-out 1000ms linear;
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../CSS/Test.css">
    <script src="../../JS/Test.js" async></script>
    <title>Document</title>
</head>
<body>
    <button> Fade In / Fade Out </button>
</body>
</body>
</html>

What is the best way to smoothly transition an element into view, then make it disappear seamlessly by fading it

Answer №1

Answer №2

Similar questions

Tips on how to connect with ngFor

Guide on changing JSON to HTML with a Groovy script

Rearranging the layout of elements: CSS switches up the text and button,

Attempting to send a formik form to a specified action URL

Retrieve an image from an external web service and transfer it to a different route in Express.js

The Bootstrap carousel feature allows you to track the duration each image is displayed

Can we stub these types of functions in any manner?

The Battle of Extends and Intersection in Typescript

Can a horizontal navigation bar be designed to span the full width of the page without relying on a table?

Issue with Jquery AJAX success function specifically in Firefox browser, while other functions in the script are functioning correctly

Tabulator: the process of loading an extensive amount of data requires a significant amount of time

Why are my styles not working when referenced from the .module.scss file?

We regret to inform you that the request cannot be processed by our Express

What are some strategies for improving the speed and efficiency of traversing an XML file with AJAX?

Issue with scrollspy causing navigation items to not highlight correctly

Obtain an oAuth token through the use of npm

Can a PHP function be invoked in an URL using ajax?

Is it possible to invoke an AngularJs service by clicking a button?

Utilize PHP to import an HTML file with JavaScript code into MySQL database

Handlebars does not support loading data into variables using Express