如何用网络动画-js来动画div高度？

Question

如何使用网络-动画-js动画绘制div高度

在我的示例中，我尝试将高度大小从150 my更改为300 my。但我想把高度动画化。我不能用css做到这一点，因为高度是可以改变的(例如，从90 to到500 to)。

如何使用网络动画-js来解决这个问题？

​

var elem = document.querySelector('.some');
  
  var animation = elem.animate({
   height: '300px'
  }, {
   duration: 500
  });

  console.log('done');

.some {
  width:300px;
  height:150px;
  border:1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js"></script>
<div class="some"></div>

​

Answer 1

你可以用速度来做到这一点。(使用javascript)

下面是一个例子：

​

document.querySelector('.some').velocity({ height: 300 });

.some {
  width:300px;
  height:150px;
  border:1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.5/velocity.min.js" integrity="sha256-NtPQd/Jy7Ze2E72YS8WJDGMu6xFYomLYibE0hpyLTjs=" crossorigin="anonymous"></script>

<div class="some"></div>

​

Answer 2

let el = document.querySelector(".some");

el.style.transition = "all 2s ease-in-out 0s";

let randomHeight= ... ;

el.style.height = randomHeight+"px";

得到一个高度值"randomHeight“，这将改变元素的高度。