Question

我正在尝试将[平滑]调整大小的动画效果工作到我的网络应用程序中。问题是CSS3的动画和过渡效果经常口吃，所以我决定采用JavaScript方法。我不想使用jQuery UI或任何形式的jQuery，因为加载时间虽然在通过CDN提供时微不足道，但却是一个额外的HTTP请求。有关方法的任何建议吗？

Answer 1

纯javascript来改变div的高度试试这个，

var myVar = null;
function cal(){
  var aa = document.getElementById("aa");
  var h = aa.style.height;
  h=parseInt(h.replace("px",""));
  myVar = setInterval(function(){
      if(h > 100){
        myStopFunction();
      }else{
        h+=5;
        aa.style.height = h+"px";
      }
      
  },30);

}

function myStopFunction() {
    clearInterval(myVar);
}

<div id="aa" style="background-color:rgba(0, 119, 221, 0.47);height:30px;">
  try this
</div>
<button onclick="cal()">click here</button>

使用纯JavaScript平滑调整大小动画

1 个答案: