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

【问题标题】：Smooth Resize Animation with Pure JavaScript使用纯 JavaScript 平滑调整动画大小
【发布时间】：2016-01-06 06:48:03
【问题描述】：

我正在尝试在我的 Web 应用程序中使用 [平滑] 调整大小动画效果。问题是 CSS3 的动画和过渡效果经常卡顿，所以我决定使用 JavaScript 方法。我不想使用 jQuery UI 或任何形式的 jQuery，因为加载时间虽然在通过 CDN 提供服务时很短，但却是一个额外的 HTTP 请求。对方法有什么建议吗？

【问题讨论】：

祝你好运找到通常比 CSS3 动画更少卡顿的 Javascript 驱动动画。 JS 是单线程的，并与所有其他 JS 活动共享 CPU。因此，它永远不能指望完美的时机。
即使它是单线程的，它似乎仍然胜过 CSS3 动画和过渡。
您能否提供更多关于您尝试制作哪些动画的详细信息？
可能有一些方法可以改进 CSS 中的动画。如果您提供更多背景信息，我们都可以提供帮助。
还有一篇有趣的文章：Replacing jQuery Animation With CSS Hardware Accelerated.

标签： javascript dom

【解决方案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>

【讨论】：

谢谢，一个实际的解决方案，而不是评论。我可以用这个！
@WhiteLotus - 如果你在乎的话，这甚至不会像它可能的那样平滑。好的 JS 动画不只是使用间隔计时器，也不只是在每个刻度上增加一个固定的量。他们使用requestAnimationFrame()，并根据经过的完成计算每个新位置。这为您提供了尽可能多的帧，并处理了实际调用间隔计时器时的可变性，从而为您提供最佳平滑度。如果你想学习的话，网上有成千上万篇关于 JS 动画的文章。
@jfriend00 我从来没有说过它必须在第一次尝试时平滑，我想看看在纯 JavaScript 中制作动画的可能方法是什么。我从未听说过 requestAnimtionFrame() 方法。谢谢你的建议。
@WhiteLotus - 查看问题的标题“平滑调整大小动画...”。哎呀。请对 Javascript 动画做一些基本的谷歌研究。你有很多东西要学，而且有很多东西可以帮助你。当您去学习，尝试一些事情，然后当您遇到更具体的问题而不是在这里提出“从头开始”的一般性问题并期望我们为您提供一般动画代码时，这个网站会更好地工作。如果您提供了一个您认为不稳定的动画的确切工作示例，您可能会惊讶于您获得了多少帮助。
最后顺利。下次我需要强调[从头开始]应该是平滑的吗？