Question

我正在使用Next.js应用程序，该应用程序的卡片组件具有更多链接。当用户单击“更多阅读”链接时，该卡应会展开，我使用了“ react-show-more” https://github.com/One-com/react-show-more。当按下具有CSS Transition规则的“阅读更多”链接但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

CSS过渡不适用于Show-More

1 个答案: