Div样式随动画变化

Question

是否可以在更改样式时添加动画?div显示为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>