Html Question posted in
Some basic documentation can be found here.

Html – how to get smooth transition when adding active class in CSS

Here is a simple program with 4 divs that change color when you click on it.No matter what i do the divs always change color with a jerk and not smoothly. I have tried applying transition on other properties as i got to know transitions doesnt work on display but i could never get the desired results.

here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Projects</title>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .boxes {
        width: 750px;
        height: 300px;
        background-color: red;
        align-items: center;
        justify-content: center;
        display: flex;
        font-size: 2rem;
        color: white;
        border: 2px solid black;
        transition: background-color 0.5s ease;
    }

    .new-boxes {
        width: 750px;
        height: 300px;
        background-color: blue;
        align-items: center;
        justify-content: center;
        display: flex;
        font-size: 2rem;
        color: white;
        border: 2px solid black;
        transition: background-color 0.5s ease;
    }

    .wrapper {
        padding: 2rem;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .box1 {
        display: flex;
    }

    .box1.hidden {
        display: none;
    }

    .box2 {
        display: flex;
    }

    .box2.hidden {
        display: none;
    }

    .new-box1 {
        display: none;
    }

    .new-box1.active {
        display: flex;
    }

    .new-box2 {
        display: none;
    }

    .new-box2.active {
        display: flex;
    }

    .box3 {
        display: flex;
    }

    .box3.hidden {
        display: none;
    }

    .new-box3 {
        display: none;
    }

    .new-box3.active {
        display: flex;
    }

    .box4 {
        display: flex;
    }

    .box4.hidden {
        display: none;
    }

    .new-box4 {
        display: none;
    }

    .new-box4.active {
        display: flex;
    }
</style>
</head>
<body>
<div class="wrapper">
    <div class="boxes box1">
        1
    </div>
    <div class="new-boxes new-box1">
        I
    </div>
    <div class="boxes box2">
        2
    </div>
    <div class="new-boxes new-box2">
        II
    </div>
    <div class="boxes box3">
        3
    </div>
    <div class="new-boxes new-box3">
        III
    </div>
    <div class="boxes box4">
        4
    </div>
    <div class="new-boxes new-box4">
        IV
    </div>
</div>

<script>
    let oldBox1 = document.querySelector(".box1");
    let newBox1 = document.querySelector(".new-box1");
    let oldBox2 = document.querySelector(".box2");
    let newBox2 = document.querySelector(".new-box2");
    let oldBox3 = document.querySelector(".box3");
    let newBox3 = document.querySelector(".new-box3");
    let oldBox4 = document.querySelector(".box4");
    let newBox4 = document.querySelector(".new-box4");

    oldBox1.addEventListener('click', () => {
        switchBox(oldBox1, newBox1);
    });

    oldBox2.addEventListener('click', () => {
        switchBox(oldBox2, newBox2);
    });

    oldBox3.addEventListener('click', () => {
        switchBox(oldBox3, newBox3);
    });

    oldBox4.addEventListener('click', () => {
        switchBox(oldBox4, newBox4);
    });

    function switchBox(oldBox, newBox) {
        let oldBoxes = document.querySelectorAll(".boxes");
        let newBoxes = document.querySelectorAll(".new-boxes");

        oldBoxes.forEach((box) => {
            if (box === oldBox) {
                box.classList.add("hidden");
            } else {
                box.classList.remove("hidden");
            }
        });

        newBoxes.forEach((box) => {
            if (box === newBox) {
                box.classList.add("active");
            } else {
                box.classList.remove("active");
            }
        });
    }
</script>
</body>
</html>

i tried adding transitions on different elemens but then it created difficulty in responsiveness and never worked like this.
i just want the same functionality as this code with the colors changing smoothly in 0.5s when clicked on a div.

Tags:

2

Answers


  1. 0

    I am guessing why you have this problem, you’re encountering is because the display property doesn’t transition smoothly. It will work better and you would achieve a smooth color transition by toggling the opacity and using absolute positioning to overlay the new boxes over the old ones.

    For example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Projects</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    
        .wrapper {
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;
            position: relative;
        }
    
        .boxes, .new-boxes {
            width: 750px;
            height: 300px;
            align-items: center;
            justify-content: center;
            display: flex;
            font-size: 2rem;
            color: white;
            border: 2px solid black;
            position: absolute;
            transition: opacity 0.5s ease, background-color 0.5s ease;
        }
    
        .boxes {
            background-color: red;
            z-index: 1;
        }
    
        .new-boxes {
            background-color: blue;
            opacity: 0;
            z-index: 0;
        }
    
        .new-boxes.active {
            opacity: 1;
            z-index: 2;
        }
    
        .hidden {
            opacity: 0;
            z-index: 0;
        }
    </style>
    </head>
    <body>
    <div class="wrapper">
        <div class="boxes box1">1</div>
        <div class="new-boxes new-box1">I</div>
        <div class="boxes box2">2</div>
        <div class="new-boxes new-box2">II</div>
        <div class="boxes box3">3</div>
        <div class="new-boxes new-box3">III</div>
        <div class="boxes box4">4</div>
        <div class="new-boxes new-box4">IV</div>
    </div>
    
    <script>
        let oldBox1 = document.querySelector(".box1");
        let newBox1 = document.querySelector(".new-box1");
        let oldBox2 = document.querySelector(".box2");
        let newBox2 = document.querySelector(".new-box2");
        let oldBox3 = document.querySelector(".box3");
        let newBox3 = document.querySelector(".new-box3");
        let oldBox4 = document.querySelector(".box4");
        let newBox4 = document.querySelector(".new-box4");
    
        oldBox1.addEventListener('click', () => {
            switchBox(oldBox1, newBox1);
        });
    
        oldBox2.addEventListener('click', () => {
            switchBox(oldBox2, newBox2);
        });
    
        oldBox3.addEventListener('click', () => {
            switchBox(oldBox3, newBox3);
        });
    
        oldBox4.addEventListener('click', () => {
            switchBox(oldBox4, newBox4);
        });
    
        function switchBox(oldBox, newBox) {
            oldBox.classList.add("hidden");
            newBox.classList.add("active");
        }
    </script>
    </body>
    </html>
    Login or Signup to reply.
  2. 0

    you can use setTimeout for this problem.

    1. Remove the display: none
    2. Add your animation or transition to each state.
    3. Use setTimeout after your toggle ends.

    For example, if your transition timing is 0.5s, you should set your timeout duration to 0.5s to remove or apply display: none on your element.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search