我有一组共享同一类(optionsclass)的div。显示设置为阻止。当用户单击它们时,将执行以下javascript函数,显示将更改为none。
function hideBlockElementsByClass(className)
{
var elements = document.getElementsByClassName(className);
for(i in elements)
{
elements[i].style.display = "none";
}
}
显示块和无显示块之间的过渡非常粗糙,我想进行更平滑的过渡。实现这一目标的最佳策略是什么?
使用 CSS3 :
.className {
opacity: 0;
visibility: hidden;
-webkit-transition: visibility 0.2s linear,
opacity 0.2s linear;
-moz-transition: visibility 0.2s linear,
opacity 0.2s linear;
-o-transition: visibility 0.2s linear,
opacity 0.2s linear;
}
.className:hover {
visibility: visible;
opacity: 1;
}
而Sridhar给出了一个很好的CSS3解决方案,其他提到了Jquery。
在这里你可以找到一个纯粹的javascript/CSS解决方案:
https://codereview.stackexchange.com/questions/7315/fade-in-and-fade-out-in-pure-javascript
试试这个方法
.HTML
<div class = "image" onclick = "eff()"></div>
.CSS
.transition {
-moz-transition: 2s width;
width: 150px;
height: 100px;
}
脚本
function eff() {
var k = document.getElementsByClassName("image");
k[0].className = "transition";
}
在普通的javascript中尝试一下:(可以在IE10,chrome,Firefox,safari,android,ios上运行)
<script>
function hideBlockElementsByClass(className) {
var elements = document.getElementsByClassName(className);
console.log(elements.length)
for (var i = 0; i < elements.length; i++) {
(function (a) {
elements[a].addEventListener('webkitTransitionEnd', function () {
elements[a].style.display = "none";
}, false);
elements[a].addEventListener('mozTransitionEnd', function () {
elements[a].style.display = "none";
}, false);
elements[a].addEventListener('oTransitionEnd', function () {
elements[a].style.display = "none";
}, false);
elements[a].addEventListener('transitionend', function () {
elements[a].style.display = "none";
}, false);
})(i);
elements[i].style.webkitTransitionDuration = "1s";
elements[i].style.mozTransitionDuration = "1s";
elements[i].style.oTransitionDuration = "1s";
elements[i].style.transitionDuration = "1s";
elements[i].style.opacity = "0";
}
}
</script>