15

所以我有这个手风琴布局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 中删除，而不考虑AnimateSharedLayoutor AnimatePresence。我尝试添加exitBeforeEnter道具，但它不起作用。

有任何想法吗？

在此处输入图像描述

4

1 回答 1

14

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

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

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

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

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

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

我创建了这 2 个变体：

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：

<!-- 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>

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

<div
      <!-- Avoid div to wrap when it is collapsing -->
      style={{
        whiteSpace: "nowrap",
        overflow: "hidden"
      }}
    >
      home 0
    </div>

最后

你可以在这里查看代码！

于 2020-08-23T23:15:48.800 回答