动态生成div，添加animate()为什么没有用？

Question

const COLORS = ["red","blue","green","yellow","pink","purple"];
document.addEventListener("click", function (ev){
    var ee = ev||event;
    var element = document.createElement("div");
    element.style.width = "10px";
    element.style.height = "10px";
    element.style.border = "1px solid black";
    element.style.position = "absolute";
    element.style.top = ee.clientY+"px";
    element.style.left = ee.clientX+"px";
    element.style.background = COLORS[Math.floor(Math.random()*COLORS.length)];
    element.animate({width:"50px"});
    document.body.appendChild(element);
  }
  );

题目描述
动态生成div,添加animate()没有效果，是哪里有问题，求教各位大佬(我是新手，勿喷，谢谢)

题目来源及自己的思路

相关代码

粘贴代码文本（请勿用截图）

你期待的结果是什？实际看到的错误信息又是什么？

Answer 1

https://developer.mozilla.org...

element.animate({width:"50px"}, {
    duration: 1000,
    iterations: Infinity
});

Answer 2

const COLORS = ["red", "blue", "green", "yellow", "pink", "purple"];
document.addEventListener("click", function (ev) {
        var ee = ev || event;
        var element = document.createElement("div");
        element.style.width = "10px";
        element.style.height = "10px";
        element.style.border = "1px solid black";
        element.style.position = "absolute";
        element.style.top = ee.clientY + "px";
        element.style.left = ee.clientX + "px";
        element.style.background = COLORS[Math.floor(Math.random() * COLORS.length)];
        document.body.appendChild(element);
        element.animate([
            // keyframes
            {width: '10px'},
            {width: '50px'}
        ], {
            // timing options
            duration: 1000,
            iterations: Infinity
        })
    }
);

尝试了可以变长诶。~

Answer 3

https://codepen.io/pantao/pen...

const COLORS = ["red", "blue", "green", "yellow", "pink", "purple"];
document.addEventListener("click", function (ev) {
  var ee = ev || event;
  var element = document.createElement("div");
  element.style.width = "10px";
  element.style.height = "10px";
  element.style.border = "1px solid black";
  element.style.position = "absolute";
  element.style.top = ee.clientY + "px";
  element.style.left = ee.clientX + "px";
  element.style.background = COLORS[Math.floor(Math.random() * COLORS.length)];
  const animation = element.animate(
    { width: "50px" },
    {
      duration: 1000
    }
  );
  animation.addEventListener('finish', () => {
    element.style.width = '50px';
  })
  document.body.appendChild(element);
});

你 element.animate() 之后创建的 Animation 本身并不会修改元素原始的样式，因为你的代码没有第二个参数中设置 duration，那么关键帧之间的时间间隔应该是 16ms（两次屏幕刷新之间的时间差，如果你是高刷屏，间隔应该更短），这你是看不出来动画区别的，你可以加上一个 duration 参数，你就可以看到动画的效果了，只是，动画执行完成之后，会立马就展示始状态的样子，因为动画执行完成了，但是你并没有改变原本的样式，只是展示一个动画而已，这个时候，你可以加一个 iterations: Infinity 参数，这会一直执行动画了，或者你是想得到一个过渡的效果，那可以加上 animation.onfinish 事件，当动画执行完成之后，将元素的样式固定为动画结束之后的样式。