如何使用javascript按类隐藏元素（平滑过渡）？ [英] How to hide elements (with smooth transition) by class with javascript?

问题描述

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

I have a group of divs that share the same class (optionsclass). The display is set to block. When a user clicks them the following javascript function is executed the display is changed to none.

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

显示块和无显示块之间的过渡非常粗糙，我想进行更顺利的过渡。达到此目的的最佳策略是什么？

The transition between display block and none is quite rough and I would like to make a smoother transition. What's the best strategy to accomplish this?

推荐答案

使用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; 
}

这篇关于如何使用javascript按类隐藏元素（平滑过渡）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！