Framer Motion 退出动画不会在带有 react-router-dom 的手风琴上触发

Question

所以我react-router-dom使用相当非常规的标记结构来使用这种手风琴布局。

演示：https : //codesandbox.io/s/falling-violet-kvqn2?file=/ src/ Case.js

一个手风琴标题的缩短代码：

      <motion.div
        layout
        transition={transition}
        key={item.id}
        style={{
          flex: isActive ? 1 : 0,
          flexBasis: isActive ? null : 56,
          ...
        }}
      >
        <NavLink
          style={{
            ...
          }}
          exact={true}
          to={item.url}
        />

        <Route exact path={item.url}>
          <motion.div
            transition={{ delay: 1, ...transition }}
            variants={{
              open: { opacity: 1 },
              collapsed: { opacity: 0 }
            }}
            initial="collapsed"
            animate="open"
            exit="collapsed"
            layout
            style={{
              ...
            }}
          >
            <Home />
          </motion.div>
        </Route>
      </motion.div>

我正在尝试framer-motion在手风琴页面之间制作动画。就像下面的gif

您可以看到动画in过渡效果很好。但是很难exit在页面更改时为道具设置动画。单击手风琴标题，内容会突然隐藏。看起来它正在从 DOM 中删除，而没有考虑AnimateSharedLayout或AnimatePresence。我尝试添加exitBeforeEnter道具，但它不起作用。

有任何想法吗？

Answer 1

您需要对代码进行一些更改：

1. 使用变体-> 您可以编排动画启动：默认情况下，所有这些动画将同时启动。但是通过使用变体，我们可以访问额外的过渡道具，例如 when、delayChildren 和 staggerChildren，它们可以让父母编排子动画的执行。

2. 此外，看起来您将需要width更改 div 大小。我尝试使用 flexBasis，但我真的做不到，过渡不起作用。

3. 删除<Route>作为motion.div的“包装”。它还停止运动以进行动画/过渡。

4. 添加<AnimatePresence>为motion.div孩子的包装。你可以在这里查看更多

所以，我的代码如下所示：

我创建了这两个变体：

const divVariants = {
  expanded: {
    width: "55%",
   transition: {
      duration: 1.2,
      ease: [0.83, 0, 0.17, 1]
    }
  },
  collapsed: {
    width: "15%",
    transition: {
      duration: 1.2,
      ease: [0.83, 0, 0.17, 1]
    }
  }
};

const tagVariants = {
  show: {
    opacity: 1,
    transition: {
      delay: 1,
      duration: 1.2,
      ease: [0.83, 0, 0.17, 1]
    }
  },
  hidden: {
    opacity: 0,
    transition: {
      duration: 1.2,
      ease: [0.83, 0, 0.17, 1]
    }
  }
};

运动.div：

const divVariants = {
  expanded: {
    width: "55%",
   transition: {
      duration: 1.2,
      ease: [0.83, 0, 0.17, 1]
    }
  },
  collapsed: {
    width: "15%",
    transition: {
      duration: 1.2,
      ease: [0.83, 0, 0.17, 1]
    }
  }
};

const tagVariants = {
  show: {
    opacity: 1,
    transition: {
      delay: 1,
      duration: 1.2,
      ease: [0.83, 0, 0.17, 1]
    }
  },
  hidden: {
    opacity: 0,
    transition: {
      duration: 1.2,
      ease: [0.83, 0, 0.17, 1]
    }
  }
};

我还为所有案例添加了一些内联样式：

<!-- Parent -->
<motion.div
        layout
        variants={divVariants}
        animate={isActive ? "expanded" : "collapsed"}
        initial={false}
        data-section={item.id}
        key={item.id}
        style={{
          overflow: "hidden",
          zIndex: i,
          display: "flex",
          position: "relative",
          backgroundColor: `hsl(${i * 20},100%,50%)`
        }}
      >

<!-- Children -->
<AnimatePresence>
          {isActive && (
            <motion.div
              layout
              variants={tagVariants}
              initial="hidden"
              animate="show"
              exit="hidden"
              style={{
                padding: 20,
                maxWidth: "100%",
                maxHeight: "100%",
                width: "100%",
                height: "100%",
                overflowY: "hidden",
                overflowX: "hidden"
              }}
            >
              <Tag data={data} />
            </motion.div>
          )}
        </AnimatePresence>

最后

你可以在这里检查代码！