如何使用关键帧在React中向下滑动模式

import React, { useState } from 'react';
import './SlideDown.css';

const SlideDown = () => {
  const [isAnimating, setIsAnimating] = useState(false);

  const handleClick = () => {
    setIsAnimating(!isAnimating);
  };

  return (
    <div>
      <button onClick={handleClick}>Toggle Slide Down</button>
      <div className={`box ${isAnimating ? 'animate' : ''}`}></div>
    </div>
  );
};

export default SlideDown;

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all 1s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.animate {
  animation: slideDown 1s forwards;
}