在动画发生后添加延迟，以便触发另一个动画

在动画设计中，有时需要在第一个动画完成后添加一个延迟，再触发第二个动画。这种效果可以通过多种方式实现，具体取决于你使用的动画库或框架。以下是一些常见的方法：

基础概念

延迟（Delay）：在动画序列中，延迟是指在开始下一个动画之前等待一段时间。

类型与应用场景

CSS动画：适用于简单的网页动画。
JavaScript动画库：如GSAP、anime.js，适用于复杂的交互式动画。
前端框架动画：如React、Vue中的动画插件。

示例代码

使用CSS动画

/* 第一个动画 */
@keyframes firstAnimation {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

/* 第二个动画 */
@keyframes secondAnimation {
  from { transform: translateY(0); }
  to { transform: translateY(100px); }
}

.element {
  animation: firstAnimation 1s forwards;
}

.element.delayed {
  animation: secondAnimation 1s 1s forwards; /* 延迟1秒后开始第二个动画 */
}

使用JavaScript (GSAP)

import gsap from 'gsap';

// 第一个动画
gsap.to('.element', { duration: 1, x: 100 });

// 延迟1秒后开始第二个动画
setTimeout(() => {
  gsap.to('.element', { duration: 1, y: 100 });
}, 1000);

使用React (react-transition-group)

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const App = () => {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div className="box"></div>
      </CSSTransition>
    </div>
  );
};

export default App;

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}