javascript 如何修复2块动画

我有这样的HTML代码：

<div>
                    <div style="display: flex;gap:150px" id="opacity-first">
                        <div>
                            <h2>ORM</h2>
                            <p>1</p>
                            <p>1</p>
                            <p>1</p>
                            <p>1</p>
                        </div>
                        <div>
                            <p>SERM</p>
                            <p>1</p>
                            <p>1</p>
                        </div>
                    </div>
                    <div style="display: none;gap:150px" id="opacity-second">
                        <div>
                            <h2>ORM</h2>
                            <p>1</p>
                            <p>1</p>
                            <p>1</p>
                            <p>1</p>
                        </div>
                        <div>
                            <p>SERM</p>
                            <p>1</p>
                            <p>1</p>
                        </div>
                    </div>
                    <div style="display: none;gap:150px" id="opacity-third">
                        <div>
                            <h2>ORM</h2>
                            <p>1</p>
                            <p>1</p>
                            <p>1</p>
                            <p>1</p>
                        </div>
                        <div>
                            <p>SERM</p>
                            <p>1</p>
                            <p>1</p>
                        </div>
                    </div>
                </div>
                <div>
                    <h2><a onclick="opacity()" id="changing-h2-first">SMM</a></h2>
                    <h2><a onclick="opacity()" id="changing-h2-second">1</a></h2>
                    <h2><a onclick="opacity()" id="changing-h2-third">1</a></h2>
                </div>

JS代码：

function opacity(){
    document.getElementById("changing-h2-first").onclick(function(){
        setTimeout(function () {
            document.getElementById('opacity-first').className = 'anim-opacity-enable';
        },200)
        document.getElementById("changing-h2-first").className = "anim-blue";
        if(document.getElementById("opacity-second").style.display === "flex")
        {
            document.getElementById("opacity-second").className = 'anim-opacity-disable'
        }
        else if(document.getElementById("opacity-third").style.display === "flex")
        {
            document.getElementById("opacity-third").className = 'anim-opacity-disable'
        }
    })
    document.getElementById("changing-h2-second").onclick(function (){
        setTimeout(function () {
            document.getElementById('opacity-second').className = 'anim-opacity-enable';
        },200)
        document.getElementById("changing-h2-second").className = "anim-blue";
        if(document.getElementById("opacity-first").style.display === "flex")
        {
            document.getElementById("opacity-first").className = 'anim-opacity-disable'
        }
        else if(document.getElementById("opacity-third").style.display === "flex")
        {
            document.getElementById("opacity-third").className = 'anim-opacity-disable'
        }
    })
    document.getElementById("changing-h2-third").onclick(function (){
        setTimeout(function () {
            document.getElementById('opacity-third').className = 'anim-opacity-enable';
        },200)
        document.getElementById("changing-h2-third").className = "anim-blue";
        if(document.getElementById("opacity-first").style.display === "flex")
        {
            document.getElementById("opacity-first").className = 'anim-opacity-disable'
        }
        else if(document.getElementById("opacity-second").style.display === "flex")
        {
            document.getElementById("opacity-second").className = 'anim-opacity-disable'
        }
    })
}

CSS动画：

@keyframes opacity-disable{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
        display: none;
    }
}
@keyframes opacity-enable{
    from{
        opacity: 0;
    }
    to{
        display: flex;
        opacity: 1;
    }
}
@keyframes black {
    from{
        color:#7A73FF;
    }
    to{
        color:#04101C;
    }
}
@keyframes blue {
    from{
        color:#04101C;
    }
    to{
        color:#7A73FF;
    }
}
.anim-opacity-enable{
    animation-name: opacity-enable;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
.anim-opacity-disable{
    animation-name: opacity-disable;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
.anim-black{
    animation-name: black;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
.anim-blue {
    animation-name: blue;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

动画的想法，如- u点击文本的右侧，其改变颜色和块左侧出现。我想知道如何修复这个动画，也许使它更容易。我开始在这一点上，所以我相信你帮助我。谢谢你，谢谢
尝试更改JavaScript代码，例如检查单击if(document.getElementById("id").onclick)

您正在HTML中使用onclick，然后尝试在opacity（）函数中附加另一个click事件。这是多余的，并且可能导致错误。选择一种附加单击事件的方式。不能直接设置显示属性的动画。相反，您可以在动画完成后在JavaScript中切换display属性。您直接设置className，这将覆盖所有现有的类。使用classList.add和classList.remove可以更好地管理类。无法通过CSS关键帧更改显示属性。你必须通过JavaScript来实现。
相反，你应该这样尝试：

<div id="content-wrapper">
    <div id="opacity-first"> ... </div>
    <div id="opacity-second"> ... </div>
    <div id="opacity-third"> ... </div>
</div>
<div id="links-wrapper">
    <h2><a id="changing-h2-first">SMM</a></h2>
    <h2><a id="changing-h2-second">1</a></h2>
    <h2><a id="changing-h2-third">1</a></h2>
</div>


document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("changing-h2-first").addEventListener("click", function() {
        toggleOpacity("opacity-first");
    });

    document.getElementById("changing-h2-second").addEventListener("click", function() {
        toggleOpacity("opacity-second");
    });

    document.getElementById("changing-h2-third").addEventListener("click", function() {
        toggleOpacity("opacity-third");
    });
});

function toggleOpacity(idToShow) {
    const ids = ["opacity-first", "opacity-second", "opacity-third"];
    ids.forEach(function(id) {
        const elem = document.getElementById(id);
        if (id === idToShow) {
            elem.classList.add("anim-opacity-enable");
            elem.classList.remove("anim-opacity-disable");
            elem.style.display = "flex";
        } else {
            elem.classList.add("anim-opacity-disable");
            elem.classList.remove("anim-opacity-enable");
            setTimeout(function() {
                elem.style.display = "none";
            }, 200);
        }
    });
}

//Update this css

.anim-opacity-enable, .anim-opacity-disable {
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.anim-opacity-enable {
    animation-name: opacity-enable;
}

.anim-opacity-disable {
    animation-name: opacity-disable;
}

javascript 如何修复2块动画

1条答案

相关问题

热门标签

最新问答