js动态设置多个@keyframes,动画加载宽度

最新推荐文章于 2024-06-21 19:52:02 发布

进阶的巨人001

最新推荐文章于 2024-06-21 19:52:02 发布

阅读量455

点赞数 9

文章标签： javascript keyframes 动画

本文链接：https://blog.csdn.net/weixin_45389051/article/details/136912208

版权

在这里插入图片描述
效果如上

const list = [
  {name: '小五', num: 50  },   {name: '大三', num: 30  }
]

$.each(list, function (i, item) {
       const animationName = `animation${i}`;
       const keyframes = `@keyframes ${animationName} {
           0% { width: 0 } 
           100% { width: ${item.num}%; }
       }`;
       const style = document.createElement('style');
       style.innerHTML = keyframes;
       document.head.appendChild(style);
       const animation = `${animationName} 1s ease forwards`

      <div class="exercise-progress exercise-progress${i}" style="width: ${item.num};animation: ${animation}"></div>
}