Thiết kế website giá rẻ

Question

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.

Thiết kế website giá rẻ

Danh mục

how to get smooth transition when adding active class in CSS