html - CSS 过渡不适用于 Show-More

Question

我正在使用 Next.js 应用程序，它有一个带有阅读更多链接的卡片组件。当用户点击阅读更多链接时，卡片应该展开，我使用了“react-show-more”https://github.com/One-com/react-show-more .当按下带有 CSS 转换规则的阅读更多链接但 CSS 转换不起作用时，我需要向卡片添加平滑扩展。这是我的卡片组件。你可以在这里找到现场演示:https://codesandbox.io/s/confident-http-cfz7p?fontsize=14

 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>
  );

Answer 1

我发现了另一个 npm 可以平滑展开，

https://github.com/tinacious/react-animated-show-more