CSS3如何实现动画与JavaScript交互

在现代Web开发中，CSS3动画和JavaScript的结合可以实现丰富且流畅的用户体验。以下是一些常见的方法来实现CSS3动画与JavaScript的交互：

1. 使用JavaScript触发动画

你可以使用JavaScript来添加或移除CSS类，从而触发动画。

HTML

<div id="animatedElement" class="hidden">Hello, World!</div>
<button id="startButton">Start Animation</button>

CSS

.hidden {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.visible {
  opacity: 1;
}

JavaScript

document.getElementById('startButton').addEventListener('click', function() {
  var element = document.getElementById('animatedElement');
  element.classList.remove('hidden');
  element.classList.add('visible');
});

2. 使用JavaScript控制动画属性

你可以使用JavaScript来直接修改CSS属性，从而实现更复杂的动画效果。

HTML

<div id="animatedElement" style="width: 0; height: 0; background-color: red;"></div>
<button id="startButton">Start Animation</button>

JavaScript

document.getElementById('startButton').addEventListener('click', function() {
  var element = document.getElementById('animatedElement');
  element.style.width = '100px';
  element.style.height = '100px';
});

3. 使用requestAnimationFrame

requestAnimationFrame是一个更高级的API，它可以让你在浏览器重绘之前执行动画代码，从而实现更流畅的动画效果。

HTML

<div id="animatedElement" style="width: 0; height: 0; background-color: red;"></div>
<button id="startButton">Start Animation</button>

JavaScript

var element = document.getElementById('animatedElement');
var start;

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  var width = Math.min(progress / 10, 100);
  var height = Math.min(progress / 10, 100);
  element.style.width = width + 'px';
  element.style.height = height + 'px';
  if (progress < 1000) {
    requestAnimationFrame(step);
  }
}

document.getElementById('startButton').addEventListener('click', function() {
  start = null;
  requestAnimationFrame(step);
});

4. 使用CSS动画事件

CSS动画提供了几个事件，如animationstart、animationend和animationiteration，你可以使用JavaScript来监听这些事件。

HTML

<div id="animatedElement" class="animated">Hello, World!</div>

CSS

.animated {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

JavaScript

var element = document.getElementById('animatedElement');

element.addEventListener('animationstart', function() {
  console.log('Animation started');
});

element.addEventListener('animationend', function() {
  console.log('Animation ended');
});

通过这些方法，你可以灵活地结合CSS3动画和JavaScript，实现各种复杂的交互效果。