Div样式随着动画而改变吗？

Question

Is it possible add an animation when changing the style.display of an div to none/block?

HTML:

 <label><input type="radio" name="All" id="all" onclick="onChange(this);" value="all" />All</label>

JS:

function onChange(vl){
    let a = String(vl.value);

    if (a=="all"){
     var divsToHide = document.getElementsByClassName("prs");

    for(var i = 0; i < divsToHide.length; i++)
    {
    divsToHide[i].style.display = "block";
    }
    }
 }

Answer 1

you means fadeout ?

.prs {
  transition: all 1s;     
  opacity: 1;
}

.prs.hidden {
  opacity: 0;
  width: 0;
  height: 0;
  padding: 0;
}

when you want to hide .prs ,

change the class to operate the style.display

Answer 2

I don't what you mean exactly but you can use jQuery's Toggle. When you click the button the div will show & hide animated.

See my fiddle: https://fiddle.jshell.net/leagz/8urn5qxh/1/

Answer 3

i was create only with in a pure java script .if you need some animation effect add some class

 var check =""; function change(vl){ let a = String(vl.checked); var divsToHide = document.getElementsByClassName("prs"); if ((vl.checked)&& (check == 0)){ for(var i = 0; i < divsToHide.length; i++) { divsToHide[i].style.display = "block"; } check=1; } else{ vl.checked = false; check=0; for(var i = 0; i < divsToHide.length; i++) { divsToHide[i].style.display = "none"; } } } 

 .prs{display:none;} 

 <label><input type="radio" name="All" id="all" onclick="change(this)" value="all" />All</label> <div class="prs">hello</div> <div class="prs">hello</div> <div class="prs">hello</div> 

Animation with class

  var check =""; function change(vl){ let a = String(vl.checked); var divsToHide = document.getElementsByClassName("prs"); if ((vl.checked)&& (check == 0)){ for(var i = 0; i < divsToHide.length; i++) { divsToHide[i].classList.toggle("show"); } check=1; } else{ vl.checked = false; check=0; for(var i = 0; i < divsToHide.length; i++) { divsToHide[i].classList.toggle("show"); } } } 

  .prs{opacity:0; width:0;height:0;} .show{width:200px;height:30px;border:1px solid red;display:block;opacity:1;} div{transition:all 0.3s ease-in;position:relative;} 

 <label><input type="radio" name="All" id="all" onclick="change(this)" value="all" />All</label> <div class="prs" >hello</div> <div class="prs">hello</div> <div class="prs">hello</div>