有没有办法让这个功能动起来? 所以当它“扩展”在 css 之间切换时,它会慢速/中等/快速。
function changeCssClass(objDivID)
{
if(document.getElementById(objDivID).className=='normalSize')
{
document.getElementById(objDivID).className = 'expandedSize';
}
else
{
document.getElementById(objDivID).className = 'normalSize';
}
}
CSS 代码:
.normalSize { width:640px; height:360px; }
.expandedSize { width:1000px; height:480px; }
最佳答案
使用 CSS 过渡可以很容易地做到这一点。用别的就可惜了。开始了:
function changeCssClass() {
if (document.getElementById('objDivID').className == 'normalSize') {
document.getElementById('objDivID').className = 'expandedSize';
} else {
document.getElementById('objDivID').className = 'normalSize';
}
}
document.getElementById('objDivID').onclick = function(){
changeCssClass();
}
和CSS:
#objDivID {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
它由 onclick 触发,但您可以使用任何类型的触发器。
关于javascript - 动画CSS切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11654975/