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

Question

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

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

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

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

Answer 2

而 Sridhar 提供了一个不错的 CSS3 解决方案和其他提到的 Jquery。

在这里你可以找到一个纯 javascript/CSS 解决方案：

https://codereview.stackexchange.com/questions/7315/fade-in-and-fade-out-in-pure-javascript

Answer 3

试试这个方法

HTML

<div class = "image"  onclick = "eff()"></div>

CSS

    .transition {
        -moz-transition: 2s width;
        width: 150px;
        height: 100px;

    }

脚本

function eff() {
    var k = document.getElementsByClassName("image"); 
    k[0].className = "transition";
}

Answer 4

用普通的 javascript 试试这个：（适用于 IE10、chrome、firefox、safari、android、ios）

<script>
       function hideBlockElementsByClass(className) {
            var elements = document.getElementsByClassName(className);
            console.log(elements.length)
            for (var i = 0; i < elements.length; i++) {
                (function (a) {
                    elements[a].addEventListener('webkitTransitionEnd', function () {
                        elements[a].style.display = "none";
                    }, false);
                    elements[a].addEventListener('mozTransitionEnd', function () {
                        elements[a].style.display = "none";
                    }, false);
                    elements[a].addEventListener('oTransitionEnd', function () {
                        elements[a].style.display = "none";
                    }, false);
                    elements[a].addEventListener('transitionend', function () {
                        elements[a].style.display = "none";
                    }, false);
                })(i);
                elements[i].style.webkitTransitionDuration = "1s";
                elements[i].style.mozTransitionDuration = "1s";
                elements[i].style.oTransitionDuration = "1s";
                elements[i].style.transitionDuration = "1s";
                elements[i].style.opacity = "0";
            }
        }
    </script>