[英]Javascript - Transition Hiding/Showing FX
我正在尝试进行过渡,以使显示/隐藏效果更加流畅。 我了解如何使用getID以及如何显示/隐藏,现在我的脚本有效了,我无法添加任何平滑的动画,我将从何处开始?
function showmorepanel(id) {
var bio = document.getElementById("bio" + id);
var cardimg = document.getElementById("cardimg" + id);
if (bio.style.display === "none") {
bio.style.display = "block";
cardimg.style.display = "none";
} else {
bio.style.display = "none";
cardimg.style.display = "block";
}
}
您可以通过css
转换和JS
切换到其他类来实现。 就像是
function showmorepanel(id) { var bio = document.getElementById("bio" + id); var cardimg = document.getElementById("cardimg" + id); bio.classList.toggle("hide"); cardimg.classList.toggle("hide"); }
.show{ opacity: 1; transition: opacity 1s; } .hide { opacity: 0; transition: opacity 1s; }
<button onclick="showmorepanel(2)">Hit</button> <p id="bio2" class="show">1- This text will toggle on clicking above button</p> <p id="cardimg2" class="hide">2- This text will toggle on clicking above button</p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.