没有React-Pose和NextJS组合的动画

Question

我想要在当前项目中制作一些精美的动画。我选择的工具是React-Pose。作为SSR框架，我将NextJs与styled-components结合使用。所以我现在的问题是，在客户端完全渲染完所有内容后，react-pose不会播放任何动画。由于有一些论坛帖子，可以将react-pose与nextjs一起使用（我猜测，即使react-pose网站本身是由nextjs组成的）。这是我的组件之一：

import posed from "react-pose";
import styled from "styled-components";

const Animation = posed.div({
  exit: {
    x: "-100%",
    delayChildren: 200,
    staggerChildren: 50
  },
  enter: {
    x: "0%",
    delay: 300
  }
});

const SidebarContainer = styled(Animation)`
  width: 300px;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
`;

const ChildrenContainer = posed.div({
  exit: {
    y: 0,
    opacity: 0
  },
  enter: {
    y: 20,
    opacity: 1
  }
});

const Sidebar = props => (
  <SidebarContainer>
    <ChildrenContainer>{props.children}</ChildrenContainer>
  </SidebarContainer>
);

export default Sidebar;

有人可以在这里帮助我吗？