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動畫改變？

回答

相關問題