[英]Div style change with animation?
將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";
}
}
}
你的意思是淡出嗎?
.prs {
transition: all 1s;
opacity: 1;
}
.prs.hidden {
opacity: 0;
width: 0;
height: 0;
padding: 0;
}
當您想隱藏.prs
,
更改類以操作style.display
我不是您的意思,但是您可以使用jQuery的Toggle。 當您單擊按鈕時,div將顯示並隱藏動畫。
看看我的小提琴: https : //fiddle.jshell.net/leagz/8urn5qxh/1/
我是用純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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.