javascript - 在 React 中为 JSX 组件添加过渡效果

Question

我想在以下 React 组件中单击按钮时添加过渡效果，但由于此代码更改了实际的 JSX 内容而不是类名，我认为这不能在 CSS 中完成。在这种情况下如何添加过渡效果？

import React, { useState } from 'react';
import ChatItem from './ChatItem';
import ChatButton from './assets/ChatButton';
import classes from './ChatBot.module.css';

const ChatList = (props) => {
  const [selected, setSelected] = useState(props.items[0]);

  function handleChangeSelected(item) {
    setSelected(item);
  }

  const questionButtons = props.items.map((item) => {
    if (item.id === selected.id) return null;
    return (
      <ChatButton onClick={handleChangeSelected.bind(null, item)}>
        {item.question}
      </ChatButton>
    );
  });

  return (
    <div className={classes.faq}>
      <section className="textbox">
        <ChatItem
          key={selected.id}
          id={selected.id}
          question={selected.question}
          answer={selected.answer}
        />
      </section>
      <div className={classes.questions}>{questionButtons}</div>
    </div>
  );
};

export default ChatList;

Answer 1

可以使用某种库，例如 React 过渡组。但我认为，如果它不是一个复杂的动画，那么为此应用一个类名可能会更容易。然后在按钮上应用您的过渡。如果妨碍您使用可见性。

<ChatButton className={item.id === selected.id && 'active'} onClick={handleChangeSelected.bind(null, item)}>
   {item.question}
</ChatButton>