js reactjs 有一个按钮当点击按钮时在按钮下方滑出一个列表列表的内容是根据一个数组生成的要使用过渡动画过渡动画为滑动不需要额外的库直接手写

可以使用CSS的transition和transform属性来实现滑动动画。以下是一个基本的实现示例：

import React, { useState } from "react";

function ListButton() {
  const [showList, setShowList] = useState(false);
  const listItems = ["Apple", "Banana", "Cherry", "Durian", "Elderberry"];

  const toggleList = () => {
    setShowList(!showList);
  };

  return (
    <div>
      <button onClick={toggleList}>Show List</button>
      {showList && (
        <ul className="list">
          {listItems.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default ListButton;

接下来，在CSS中添加动画效果：

.list {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background: #fff;
  transition: max-height 0.3s ease-out;
}

.list li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.list.show {
  max-height: 200px;
  transition: max-height 0.3s ease-in;
  transform: translate3d(0, 100%, 0);
}

这里的关键是使用max-height来实现列表的展开和收起，同时使用overflow: hidden来隐藏列表。当.list.show被添加时，max-height被设置为一个足够高的值，从而展开列表。同时，transform被用来实现滑动效果，将列表从下方滑出。

最后，将.list的class设置为show或hide即可触发动画效果：

import React, { useState } from "react";
import "./ListButton.css";

function ListButton() {
  const [showList, setShowList] = useState(false);
  const listItems = ["Apple", "Banana", "Cherry", "Durian", "Elderberry"];

  const toggleList = () => {
    setShowList(!showList);
  };

  return (
    <div>
      <button onClick={toggleList}>Show List</button>
      <ul className={`list ${showList ? "show" : "hide"}`}>
        {listItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default ListButton;
``