CSS 过渡不适用于 Show-More答案

【问题标题】：CSS transition is not working with Show-MoreCSS 过渡不适用于 Show-More
【发布时间】：2019-10-20 14:14:39
【问题描述】：

我正在使用 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>
  );

【问题讨论】：

我是打开这个问题的人。

标签： html css reactjs next.js

【解决方案1】：

我找到了另一个可以平滑扩展的 npm，

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

【讨论】：