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将显示＆amp;隐藏动画。

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

Answer 3

我只使用纯java脚本创建。如果你需要一些动画效果，请添加一些<div id="myGraph"> </div>

＆＃13;

class

＆＃13;

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

＆＃13;

.prs{display:none;}

＆＃13;

带课程的动画

＆＃13;

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

＆＃13;

    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");
        }
      
      
      }
     }

＆＃13;

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

＆＃13;

动画的Div风格变化？

3 个答案: