如何通过JavaScript类来隐藏元素（平滑过渡）？

Question

我有一组分享相同的类（选项类别）。显示器设置为块。当用户点击它们时，将执行以下JavaScript功能，显示器将更改为无。

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

显示块和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

尝试此方法

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 3

尽管Sridhar给出了一个不错的CSS3解决方案，还有其他一些提到的Jquery。

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

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

Answer 4

尝试这种在普通的JavaScript：（上IE10将工作，铬，火狐， 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> 

Answer 5

我的代码：

<a href="javascript:ShowDiv('MyMesage');"> Click here</a> 

<div id="MyMesage" style="display:none;opacity:0; background-color:pink; margin:0 0 0 100px;width:200px;"> 
blablabla 
</div> 

<script> 
function ShowDiv(name){ 
    //duration of transition (1000 miliseconds equals 1 second) 
    var duration = 1000; 
    // how many times should it should be changed in delay duration 
    var AmountOfActions=100; 

    var diiv= document.getElementById(name); 
    diiv.style.display = 'block'; 

    var counte=0; 
    setInterval(function(){ 
     counte ++; if (counte<AmountOfActions) { diiv.style.opacity = counte/AmountOfActions;} 
    }, 
    duration/AmountOfActions); 
} 

</script>