要让Bootstrap 5模式的淡出效果起作用,可以通过以下步骤实现(不使用jQuery和其他附加组件):
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<script src="path/to/bootstrap.min.js"></script>
<button id="fadeButton" class="btn btn-primary">淡出按钮</button>
opacity
属性和transition
属性来实现淡出效果。var fadeButton = document.getElementById("fadeButton");
fadeButton.addEventListener("click", function() {
fadeButton.style.opacity = "0";
});
transition
属性来控制淡出效果的持续时间和过渡效果。#fadeButton {
transition: opacity 0.5s ease;
}
在上述代码中,0.5s
表示淡出效果的持续时间为0.5秒,ease
表示过渡效果为缓慢开始和结束的效果。
这样,当点击按钮时,按钮会逐渐淡出直到完全透明。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云