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

Question

将div的style.display更改为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

你的意思是淡出吗？

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

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

当您想隐藏.prs ，

更改类以操作style.display

Answer 2

我不是您的意思，但是您可以使用jQuery的Toggle。 当您单击按钮时，div将显示并隐藏动画。

看看我的小提琴： https : //fiddle.jshell.net/leagz/8urn5qxh/1/

Answer 3

我是用纯Java脚本创建的。如果需要一些动画效果，请添加一些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> 

课堂动画

  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>