将动画函数从jQuery转换为普通的js

将动画函数从jQuery转换为普通的JavaScript可以通过使用原生JavaScript的特性来实现。以下是一个简单的示例代码，将jQuery的动画函数转换为普通的JavaScript：

// 从jQuery转换为普通的JavaScript动画函数
function animate(element, property, targetValue, duration) {
  const startValue = parseFloat(getComputedStyle(element)[property]);
  const startTime = performance.now();

  function step(currentTime) {
    const elapsedTime = currentTime - startTime;
    const progress = Math.min(elapsedTime / duration, 1);
    const currentValue = startValue + (targetValue - startValue) * progress;

    element.style[property] = currentValue + 'px';

    if (progress < 1) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

// 示例用法
const box = document.getElementById('box');
animate(box, 'left', 400, 1000);

在这个示例中，animate函数接受四个参数：element表示要进行动画的元素，property表示要改变的CSS属性，targetValue表示目标值，duration表示动画持续的时间。函数内部通过获取起始值和当前时间计算动画的进度，并根据进度更新元素的样式。使用requestAnimationFrame函数来实现流畅的动画效果。

这种方法的优势是不依赖于第三方库，减少了页面的加载时间和依赖。同时，通过使用原生JavaScript可以更好地理解和控制动画的实现细节。

这个动画函数可以应用于各种场景，例如页面的滚动效果、元素的渐变、缩放等。对于更复杂的动画，可以结合CSS的transition属性和transform属性来实现更多的效果。

腾讯云相关产品和产品介绍链接地址：