How to hide elements (with smooth transition) by class with 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?

回答1:

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

回答2:

While Sridhar gives a nice CSS3 solution and other mention Jquery.

Here you can find a pure javascript/CSS solution:

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

回答3:

Try this method

HTML

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

CSS

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

    }

Script

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

回答4:

try this in plain javascript:(Will work on 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>

回答5:

My code:

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

来源：https://stackoverflow.com/questions/19706147/how-to-hide-elements-with-smooth-transition-by-class-with-javascript

标签

javascript

css-transitions

fadeout