我在 React 项目中使用Framer Motion作为动画库。我正在尝试使用when属性在子元素之后为父元素设置动画。它不起作用，因为ContentVariants和ImgVariants同时运行。

代码沙盒

import React, { Component } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { motion } from "framer-motion";

export const ContentVariants = {
  expanded: () => ({
    width: "150px",
    transition: {
      when: "afterChildren",
      duration: 2
    }
  }),
  collapsed: () => ({
    width: "50px",
    transition: {
      when: "afterChildren",
      duration: 2
    }
  })
};

export const Content = styled(motion.div)`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: …

我在使用成帧器运动使动画工作时遇到一些问题。任何帮助将不胜感激。

代码沙盒示例

（显然使用 React + Gatsby）我有一个汉堡包按钮，可以在我的网站中打开导航菜单。我想知道如何使用 Framer Motion 打开带有动画的菜单。

在我的反应应用程序中，我需要在组件之间切换，就像在轮播中一样。我发现这个示例仅使用成帧器运动构建图像轮播：https://codesandbox.io/s/framer-motion-image-gallery-pqvx3 ?file=/src/Example.tsx:1715-1725

我想使其适应组件之间的切换。目前我的页面看起来像这样：

const variants = {
  enter: (direction: number) => {
    return {
      x: direction > 0 ? 100 : -100,
      opacity: 0,
    }
  },
  center: {
    zIndex: 1,
    x: 0,
    opacity: 1,
  },
  exit: (direction: number) => {
    return {
      zIndex: 0,
      x: direction < 0 ? 100 : -100,
      opacity: 0,
    }
  },
}

const Page = () => {

const [[page, direction], setPage] = useState([0, 0])
const paginate = (newDirection: number) => {
  setPage([page + …

我正在尝试在短暂延迟后使用 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,
      },
    };
  }

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

https://codesandbox.io/s/framer-motion-not-working-id46n?file=/src/Notifications.tsx

正如您在此 gif 中看到的，通知在从 DOM 中删除后不会执行退出动画。（它们在生成后 6 秒分别获得）。为什么？

我已经完成了其他答案中提到的所有操作，例如：

1. 为每个通知子项添加唯一键
2. <Routes location={location} key={location.pathname}>
3. ETC。

为什么它不起作用？

目标： 获取通知以在被删除时播放一些退出动画（即在指定的通知持续时间之后）

当我的组件中的某些道具在成帧器运动中发生变化时，我想淡出该属性，然后淡入“新”属性值？

这是我想象的动画时间线：

• 0：道具值变化，旧值开始淡出
• .5：新值可见
• 1：新值完成淡入

但我认为使用成帧器做到这一点的唯一方法是使用超时。除了使用超时之外还有其他方法可以达到这种效果吗？

代码沙箱

import { motion } from "framer-motion";
import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [seconds, setSeconds] = useState(0);
  const [anim, setAnim] = useState("in");
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((seconds) => seconds + 1);
      setAnim("in");
      setTimeout(() => {
        setAnim("out");
      }, 500);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  const variants = {
    out: {
      opacity: 0
    },
    in: {
      opacity: 1,
      transition: …

我正在构建一个 UI 库。

有人将framer-motion 与故事书一起使用吗？

它在故事书中工作正常，但在构建环境中出现错误。

有些人建议降级，但这对我不起作用。

有人有和我类似的问题吗？

所以，我一直在尝试在我的 React 项目中使用 Framer Motion。我基本上想在 div 渲染时将高度从 0 动画到“自动”。我尝试了下面的代码，但高度没有动画

<motion.div
  initial={{ height: 0 }}
  animate={{ height: "auto" }}
  transition={{ duration: 0.5 }}
  key={searchQuery?.length}
>

当我用宽度替换高度时，动画工作正常，但无法弄清楚为什么高度没有动画。我无法找到与此相关的任何适当的文档。

这是演示的CodeSandbox 链接。

由于某种原因，我的 NextJS 页面转换与框架运动似乎不起作用。我遵循了很多教程并做了很多研究，但它仍然不起作用。这是我的_app.tsx代码。

import '../styles/globals.css'
import '../styles/ui.css'
import '../fonts/define.css'
import { AppProps } from 'next/app'
import Layout from '../layouts/dashboard'
import Sidebar from '../components/Sidebar'
import { AnimatePresence, motion } from 'framer-motion'

const App = ({ Component, pageProps }: AppProps) => {
  return <main>
      <Sidebar/>
      <AnimatePresence>
        <motion.div initial={{opacity: 0}} animate={{opacity: 1}} exit={{opacity: 0}} className="content">
          <Component {...pageProps} />
        </motion.div>
      </AnimatePresence>
    </main>
}

export default App

当我在路线之间切换时，转换不会触发。它仅在初始加载时淡入，然后opacity: 1将样式应用于.contentdiv ，仅此而已。

感谢您的帮助！