有没有办法在 framer 运动分解项目之前更新 children？

Question

我想在元素卸载前更新内容和边框。

https://codesandbox.io/s/agitated-cerf-siq8e?file=/src/App.js

Answer 1

您永远不允许更改内容，因为您只测试 true:

 {isOpen && (

组件内的值永远不会为 false。

您可以通过删除 AnimatedPresense 并引入 useCycle 来简化示例，以便在动画变体之间高效循环。

import { motion, useCycle } from "framer-motion";
import * as React from "react";

const variants = {
  open: { 
    height: "auto" ,
    transition: { duration: 0.8, ease: "easeInOut" }
  },
  collapsed: { 
    height: 0 ,
    transition: { duration: 0.8, ease: "easeInOut" }
  }
}

export default function App() {
  const [variant, toggleVariant] = useCycle('open', 'collapsed');

  return (
    <div className="App">
        <motion.section
          style={{ overflow: "hidden" }}
          variants={variants}
          animate={variant}
        >
          <div
            style={{
              border: `5px solid ${variant === 'open' ? "red" : "blue"}`,
              height: 100
            }}
          >
            {variant}
          </div>
        </motion.section>
      <button onClick={toggleVariant}>
        {variant === 'open' ? 'collapse me': 'expand me'}
      </button>
    </div>
  );
}

Codesandbox

有没有办法在 framer 运动分解项目之前更新 children？

Is there a way to update the children before the framer motion disassembles the items?

framer-motion