不用jQuery实现的动画效果代码

以下是“不用jQuery实现的动画效果代码”的完整攻略：

1. 确定动画效果的目标元素

在使用JavaScript实现动画效果时，需要先确定目标元素。可以使用 document.querySelector() 或 document.querySelectorAll() 方法获取目标元素。例如，以下代码会选择 class 为 target 的所有元素：

const targets = document.querySelectorAll('.target');

2. 实现动画效果

使用 JavaScript 实现动画效果的方法有很多，以下是其中的两个示例：

2.1. 使用 CSS 动画

CSS 动画通过在元素上设置 @keyframes，然后在元素的 CSS 样式中使用 animation 属性来实现。可以使用 JavaScript 在运行时在元素上添加或删除相应的 CSS 类名以启用或停用动画。

以下是一个简单的示例，展示如何使用 CSS 动画将目标元素从左侧滑入。

HTML 代码：

<div class="target">目标元素</div>

CSS 代码：

.target {
  position: absolute;
  top: 50%;
  left: -50px;
  width: 100px;
  height: 100px;
  background-color: red;
  animation: slide-in 0.5s forwards;
}

@keyframes slide-in {
  from {
    transform: translateX(-100px);
  }
  to {
    transform: translateX(0);
  }
}

JavaScript 代码：

const target = document.querySelector('.target');

// 添加类名以启用动画
target.classList.add('slide-in');

// 删除类名以停用动画
setTimeout(() => {
  target.classList.remove('slide-in');
}, 500);

2.2. 使用 JavaScript 进行动画计算

使用 JavaScript 进行动画计算的方法有很多，这里只介绍其中的一种——使用 requestAnimationFrame()。

requestAnimationFrame() 是一个浏览器提供的 API，它会在下次重绘页面之前调用指定的回调函数。可以在回调函数中更新元素 CSS 样式以实现动画效果。

以下是一个简单的示例，展示如何使用 requestAnimationFrame() 将目标元素从左侧滑入。

HTML 代码：

<div class="target">目标元素</div>

CSS 代码：

.target {
  position: absolute;
  top: 50%;
  left: -50px;
  width: 100px;
  height: 100px;
  background-color: red;
}

JavaScript 代码：

function slideIn(element) {
  let start = performance.now();

  function animate(currentTime) {
    // 计算动画进度
    let elapsed = currentTime - start;
    let duration = 500;
    let progress = Math.min(elapsed / duration, 1);
    let distance = 100 * progress;

    // 更新元素 CSS 样式
    element.style.transform = `translateX(${distance}px)`;

    // 动画未结束，继续执行
    if (elapsed < duration) {
      requestAnimationFrame(animate);
    }
  }

  // 启动动画
  requestAnimationFrame(animate);
}

const target = document.querySelector('.target');

// 启动动画
slideIn(target);

3.总结

以上是两个使用 JavaScript 实现动画效果的示例，实际上还有很多其他方法可以实现动画效果，如使用 SVG 动画等。在实现动画效果时，需要注意动画的流畅度和性能，不要滥用动画效果，以免影响用户体验。