js怎么调用css里的动画

JS 调用 CSS 里的动画

要在 JavaScript 中调用 CSS 动画，主要方法包括添加/删除 CSS 类、使用 JavaScript 控制动画属性、结合事件监听器进行交互。其中，添加/删除 CSS 类是最常用且简单的方式。通过操作 DOM 元素的 classList 属性，可以轻松地启动或停止 CSS 动画。下面将详细描述如何通过这种方式调用 CSS 动画。

一、添加/删除 CSS 类

1.1、定义 CSS 动画

首先，需要定义一个 CSS 动画。假设我们有一个简单的旋转动画：

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotate-animation {
  animation: rotate 2s infinite;
}

1.2、使用 JavaScript 添加/删除类

接下来，可以通过 JavaScript 来添加或删除上述定义的动画类：

<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    .rotate-animation {
      animation: rotate 2s infinite;
    }
  </style>
</head>
<body>
  <div id="myElement">Rotate Me!</div>
  <button onclick="startAnimation()">Start Animation</button>
  <button onclick="stopAnimation()">Stop Animation</button>
  <script>
    function startAnimation() {
      document.getElementById('myElement').classList.add('rotate-animation');
    }
    function stopAnimation() {
      document.getElementById('myElement').classList.remove('rotate-animation');
    }
  </script>
</body>
</html>

在上述代码中，点击“Start Animation”按钮会调用 startAnimation 函数，从而将 rotate-animation 类添加到目标元素上，启动动画。点击“Stop Animation”按钮则会调用 stopAnimation 函数，移除动画类，从而停止动画。

二、使用 JavaScript 控制动画属性

2.1、动态设置 CSS 属性

除了添加/删除类，还可以通过 JavaScript 动态设置 CSS 属性来控制动画。例如：

<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes move {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(100px);
      }
    }
    #myElement {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="myElement"></div>
  <button onclick="startAnimation()">Start Animation</button>
  <button onclick="stopAnimation()">Stop Animation</button>
  <script>
    function startAnimation() {
      const element = document.getElementById('myElement');
      element.style.animation = 'move 2s infinite';
    }
    function stopAnimation() {
      const element = document.getElementById('myElement');
      element.style.animation = '';
    }
  </script>
</body>
</html>

在这个例子中，点击“Start Animation”按钮会动态设置目标元素的 animation 属性，启动动画。点击“Stop Animation”按钮则会清空 animation 属性，从而停止动画。

三、结合事件监听器进行交互

3.1、事件触发动画

有时需要在特定事件发生时启动动画，比如点击、悬停等。可以通过事件监听器来实现：

<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes scale {
      from {
        transform: scale(1);
      }
      to {
        transform: scale(1.5);
      }
    }
    .scale-animation {
      animation: scale 1s forwards;
    }
    #myElement {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="myElement"></div>
  <script>
    const element = document.getElementById('myElement');
    element.addEventListener('mouseover', function() {
      element.classList.add('scale-animation');
    });
    element.addEventListener('mouseout', function() {
      element.classList.remove('scale-animation');
    });
  </script>
</body>
</html>

在这个示例中，当鼠标悬停在元素上时，会添加 scale-animation 类，启动动画。当鼠标移出时，会移除该类，停止动画。

四、结合 JavaScript 动态创建样式

有时需要根据动态条件生成动画样式，可以在 JavaScript 中创建和插入样式：

4.1、动态生成样式

<!DOCTYPE html>
<html>
<head>
  <style>
    #myElement {
      width: 100px;
      height: 100px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="myElement"></div>
  <button onclick="startAnimation()">Start Animation</button>
  <script>
    function startAnimation() {
      const style = document.createElement('style');
      style.type = 'text/css';
      style.innerHTML = `
        @keyframes dynamicRotate {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        #myElement {
          animation: dynamicRotate 3s infinite;
        }
      `;
      document.head.appendChild(style);
    }
  </script>
</body>
</html>

在这个例子中，点击“Start Animation”按钮会动态生成一个包含动画的 <style> 元素，并将其插入到文档的 <head> 中，从而启动动画。

五、使用 JavaScript 控制动画进度

5.1、控制动画进度

有时需要通过 JavaScript 来控制动画的进度，可以使用 animation-play-state 属性：

<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-100px);
      }
    }
    #myElement {
      width: 100px;
      height: 100px;
      background-color: green;
      animation: bounce 2s infinite;
      animation-play-state: paused;
    }
  </style>
</head>
<body>
  <div id="myElement"></div>
  <button onclick="toggleAnimation()">Toggle Animation</button>
  <script>
    function toggleAnimation() {
      const element = document.getElementById('myElement');
      const currentState = element.style.animationPlayState;
      element.style.animationPlayState = currentState === 'running' ? 'paused' : 'running';
    }
  </script>
</body>
</html>

在这个示例中，点击“Toggle Animation”按钮会切换动画的播放状态，从而控制动画的启动和暂停。

六、结合高级项目管理系统

在实际项目开发中，尤其是涉及到复杂的动画和交互效果时，使用一个高效的项目管理系统能够极大地提升团队的协作效率和项目的管理质量。推荐使用以下两个项目管理系统：

研发项目管理系统PingCode：PingCode 提供强大的项目管理功能，支持需求管理、任务分配、进度跟踪等，适合研发团队使用。它能够帮助团队更好地规划和管理动画开发任务，确保项目按时交付。
通用项目协作软件Worktile：Worktile 是一款功能全面的项目协作软件，适用于各种类型的团队。它支持任务管理、文件共享、实时沟通等功能，能够帮助团队高效协作，提升工作效率。

总结

通过 JavaScript 调用 CSS 动画，可以实现更加丰富和动态的用户交互体验。无论是通过添加/删除类、动态设置 CSS 属性，还是结合事件监听器进行交互，都可以轻松实现动画效果。在实际开发中，选择合适的方法，并结合高效的项目管理系统进行协作，能够极大地提升项目的开发效率和质量。