CSS交易不适用于npm包“ react-show-more”

Question

我正在使用Next.js应用程序，该应用程序的卡片组件具有更多链接。当用户单击“更多阅读”链接时，卡片应该展开，我使用了“ react-show-more” https://github.com/One-com/react-show-more，现在它可以正常工作，但是当按下CSS的“更多阅读”链接时，我需要为卡片添加平滑的展开过渡规则，但CSS过渡不起作用。这是我的卡片组件，并且在其中添加了导入“ react-show-more”包的标签。

  return (
    <CardOuter>
      <CardIcon>
        <img className="CardIcons" alt="cardIcon" src={Icon} />
      </CardIcon>
      <CardContent>
        <h3>{Title}</h3>
        <ShowMore
          lines={5}
          more={<Link className="link-right" Content="Read More" />}
          less={<Link className="link-right-sl" Content="Show less" />}
          anchorClass="showMore"
        >
          {Description}
        </ShowMore>
      </CardContent>
    </CardOuter>
  );