javascript - 如何使用 javascript 按类隐藏元素(平滑过渡)？

Question

我有一组共享相同类 (optionsclass) 的div。显示设置为阻止。当用户单击它们时，将执行以下 javascript 函数，显示更改为无。

function hideBlockElementsByClass(className)
{
    var elements = document.getElementsByClassName(className);
    for(i in elements)
    {
        elements[i].style.display = "none";
    }
}

显示 block 和无 block 之间的过渡非常粗糙，我想进行更平滑的过渡。实现这一目标的最佳策略是什么？

Answer 1

使用 CSS3:

.className { 
 opacity: 0; 
 visibility: hidden;
 -webkit-transition: visibility 0.2s linear,
 opacity 0.2s linear;
 -moz-transition: visibility 0.2s linear,
 opacity 0.2s linear;
 -o-transition: visibility 0.2s linear,
 opacity 0.2s linear; 
}

.className:hover { 
visibility: visible; 
opacity: 1; 
}