Div动画改变？

将div的style.display更改为none/block时，是否可以添加动画？Div动画改变？

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

来源

2016-11-09 zzz

是OK使用jQuery？那么很容易 –

你意味着淡出？

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

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

当你想隐藏 .prs

，

更改类操作style.display

来源

2016-11-09 12:58:52 TomIsion

对于jQuery，可以使用'.animate（）'。注意'.animate（）'的'callback'。 – TomIsion

我没有你的意思究竟是什么，但你可以使用jQuery的切换。当你点击按钮的div会显示&隐藏动画。

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

来源

2016-11-09 13:03:02

是的，这是完美的，但我不能使用jQuery这个项目，所以有可能与JS？ – zzz

我只是用纯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>

来源

2016-11-09 13:09:14 prasanth

Div动画改变？

回答

相关问题