小编n_d*_*d22的帖子

我希望将这三个图像堆叠在一起。我不在乎它们是否显示为动画，并且两个图像会从每个图像的侧面水平弹出。

然而我遇到了一个问题。

请参阅附图：

所有三个 SVG 都包含在以下结构中：

<ImageContainer>
  <MainIcon />
  <JobListingIcon />
  <SingularListing />
</ImageContainer>;

这是在弹性框中：

const ImageContainer = styled.div`
    width: 90%;
    height: 400px;
    margin-top: 20px;
    background-color: #636388;

    display: flex;

    align-items: center;
    justify-content: center;
    flex-direction: row;
`;

我不明白为什么它们以这种方式显示，我尝试将所有 3 个 SVG 绝对定位，但什么也没有。

这些堆叠的方法是什么？它不是一个弹性盒子吗？可能类似于 MUI 网格之类的东西？

对不起！

我正在尝试在短暂延迟后使用 Framer Motion 库循环播放动画。动画本身会在安装时、网页刷新时播放，但不会重复。我查看了文档，这似乎是类似的语法。

const AnimateTrial = {
  initial: {
    opacity: 0,
    x: -100,
    y: -35,
    scale: 0.9,
  },
  animate: (i) => {
    const delay = 5 + i * 0.5;
    return {
      opacity: 1,
      x: -10,
      y: -35,

      transition: {
        opacity: { delay, duration: 1.5 },
        x: { delay, duration: 1.5},
        repeatType: "Infinity",
        repeatDelay: 5,
      },
    };
  }

有人有想法吗？一切正常，减去底部两行！