javascript - 切换元素时如何进行转换？

Question

前言:请原谅我的天真，我是网络开发的新手!

等等my website我的导航栏中有三个元素，单击后所有元素都会切换。它现在显然还没有完成，但我正在尝试先完成它的设计。我正在尝试将某种过渡合并到切换中，也许是某种淡入，但我不确定如何进行。有没有办法让它在触发功能时(即出现灰色框)，框过渡，而不是立即出现？

切换功能的 Javascript 如下:

function toggle_visibility(x, y, z) { 

    /* Each variable stores one of the 3 elements that are on the navbar */
    var a = document.getElementById(x); 
    var b = document.getElementById(y); 
    var c = document.getElementById(z);

    if (a.style.display == 'none') { 
        a.style.display = 'block'; 
        b.style.display = 'none';
        c.style.display = 'none';
    } else {
        a.style.display = 'none';
    }
}

我还遇到了一个问题，即最初需要点击两次才能切换显示，但我稍后会尝试修复该问题。

Answer 1

您不需要使用 jQuery 来创建动画。您可以通过向元素添加类来更改其状态，然后通过 CSS 添加动画来实现此目的。
这是 a tutorial关于如何准确地做您正在寻找的事情。
如果你不想自己创建动画，你可以使用类似 animate.css 的东西。