标签: framer-motion

我在使成帧器运动“staggerChildren”过渡到处理简单的项目列表时遇到了一些问题。它基本上允许子组件的动画交错。

我为父容器和子容器设置了这样的动画属性：

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.5
    }
  }
};

const listItem = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
};

然后我获取一组项目并将其保存到我的用户状态。最后只是一个简单的地图来渲染该数组中的一些数据。

export const Example = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get("https://reqres.in/api/users").then(res => {
      setUsers(res.data.data);
    });
  }, []);

  return (
    <motion.ul variants={container} initial="hidden" animate="show">
      {users.map((item, i) => (
        <motion.li key={i} variants={listItem}>
          {item.first_name}
        </motion.li>
      ))}
    </motion.ul>
  );
};

问题是这些项目在渲染时不会交错并最终同时淡入。我不确定为什么。例如： …

我正在使用Framer Motion为Next.js页面过渡设置动画。但是，使用AnimatePresence会破坏hash链接导航，页面不再转到目标id元素。

页面转换是完美的，直到您想导航到页面上的苛刻 ID :(

// I have a link component setup like this
// index.tsx
<Link href="/about#the-team" scroll={false}>
  <a>The Team</a>
</Link>

// Targeting another page `about.tsx` with the id
// about.tsx

{/* ...many sections before.. */}
<section id="the-team">{content}</section>

我有一个自定义_app.tsx，如下所示。

// _app.tsx
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { AnimatePresence } from 'framer-motion';

const MyApp = ({ Component, pageProps }: AppProps): …

\xe2\x80\xa8\xe2\x80\xa8我最近升级到最新的react-router-dom和他们奇特的新数据API，这本质上意味着使用新对象重写我的应用程序的路由逻辑 -基于路由而不是带有路由的 V5 JSX 语法。我想知道这里是否有人设法使用 React-router V6 进行路由转换？\xe2\x80\xa8 \xe2\x80\xa8

在 V5 中，可以通过以下方式声明嵌套路线动画：\xe2\x80\xa8\xe2\x80\xa8

<AnimatePresence>\n    <Routes location={location} key={locationArr[1]}>\n         <Route path="/" />\n\n         <Route path="/nested/*">\n            <AnimatePresence>\n                <Routes location={location} key={locationArr[2]}>\n                    <Route path="/nested/1" />\n                    <Route path="/nested/2" />\n                </Routes>\n            </AnimatePresence>\n         </Route>\n     </Routes>\n</AnimatePresence>\n

以这种方式管理嵌套 Routes 对象键允许仅在更改的嵌套路由上执行页面转换：导航到不同的子路由时，父路由不会重新呈现。\xe2\x80\xa8\xe2\x80\xa8但是现在有了 V6，路由对象不再存在，并且我\xe2\x80\x99m 在实现与 V5 中相同的功能时遇到了一些麻烦。

我\xe2\x80\x99创建了一个codesandbox来尝试复制V5嵌套子路由动画功能。沙箱对父路由和嵌套路由使用稳定的 useOutlet 参考，遵循https://github.com/remix-run/react-router/discussions/8008#discussioncomment-1280897.\xe2\x80\xa8\xe2\ 的讨论x80\xa8

Codesandbox：https://codesandbox.io/s/cool-cherry-wjrvhl ?file=/src/App.tsx\xe2\x80\xa8\xe2\x80\xa8

使用最新的react、react-router-dom、typescript和framer-motion。

在沙箱中，\xe2\x80\x99 可以看到父路由动画按预期工作，但嵌套路由根本不会渲染，可能是因为父 Outlet 引用被冻结。使内容更新的唯一方法是刷新页面。将 RootLayout\xe2\x80\x99s 键从 locationArr[1] 更改为 location.pathname 将正确重新渲染嵌套路由，但这意味着整个页面布局重新渲染，这是预期的，但不是可取的：我的应用程序有一个标题组件在所有子路线上都可见，我希望只有 Outlet 在嵌套子路线之间导航时才会动画，而标题在子路线动画期间保持可见和静止。

所需的结果与不使用数据 API 的沙箱相同：https://codesandbox.io/s/animated-nested-routes-demo-react-router-v6-forked-lxf1bf

我开始认为这对于 V6 数据 …

我正在使用成帧器运动制作应用程序，我需要将 svg 拖动到另一个 svg 内，但我的问题是视图框大小不等于窗口大小，因此当我拖动元素时，鼠标在屏幕上的 1px 移动就像 100+ px。我知道在 JavaScript 中我们可以使用 screenX、sceenY 和 CTM（当前变换矩阵）计算 x 和 y。是否可以以某种方式使成帧器运动拖动功能来计算它？

<svg viewBox="0 0 40 20">
  <motion.circle drag cx="5" cy="5" r="0.5"strokeWidth="0.1"/>
</svg>

PS 我无法更改视图框大小及其 100% 的屏幕宽度和高度，可能我们需要使用成帧器运动useTransform或useMotionValue挂钩来转换当前矩阵，但我不知道该怎么做。

这是应用程序的当前状态，当您尝试拖动播放器对象时，您可以看到问题。https://waterpolo.klaktech.com

我正在使用成帧器运动在我的项目中创建滑动交互。我试图做到这一点，以便当用户拖动完孩子后，它会“弹回”到设定位置。

我从文档中看到，您可以使用弹簧来设置运动值的动画：const y = useSpring(x, { damping: 10 })，但我想我做得不正确？这是我的代码：

export default function SwipeContainer(props) {
  const x = useMotionValue(0);
  const m = useSpring(x, { damping: 10 });

  const handleDragEnd = (evt) => {
    console.log(evt);
    m.set(200);
  }

  return (
    <div className={styles.swipeContainer}>
      <motion.div
        style= {{ x, m }}
        className={styles.motionDiv}
        drag="x"
        onDragEnd={handleDragEnd}
      >
        {props.children}
      </motion.div>
    </div>
  );

}

我期望当 DragEnd 事件发生时，孩子将动画到 x:200，但这并没有发生。我是否设置了错误的值，或者可能是我将运动值应用到motion.div 的方式？

我正在使用 Framer-motion，并且正在尝试找到一种方法来延迟旋转 Y 的动画，同时 x 动画到特定位置然后启动旋转 Y。

这在 Framer 运动中可能吗？

例子：

const variants = {
  flip: {
    rotateY: 0,
    x: -20,
    scale: 1,
    transition: {
      ease: "easeInOut",
      duration: 1.2
    }
  },
  hidden: {
    rotateY: 180,
    x: 150,
    scale: 0.5,
    transition: {
      ease: "easeInOut",
      duration: 1
    }
  }
};

使用 Framer Motion，我想使用百分比（例如）而不是像素useTransform来更改元素的宽度。MotionValue75%

默认假设像素：

<motion.div className="dynamic-element" style={{ width: w }}>

我想要如下的东西：

<motion.div className="dynamic-element" style={{ width:`${w}%` }}>

这显然是行不通的。

如何指定我的值MotionValue是百分比而不是基于像素？

或者，我可以使用filter: scale()，但这会导致内容模糊（是的，我已经研究过如何解决这个问题，但没有取得任何成功）。

使用framer-motion，我遇到一个问题，即更新我传递custom给motion.div变体的道具的对象不会触发预期的样式更改。

我创建了以下沙箱来演示该问题：

https://codesandbox.io/s/framer-motion-stale-custom-fibp5?file=/src/App.js

我的期望是，当我切换主题时 - 圆圈的开/关颜色将立即根据新主题而改变。（从黑/白到深蓝/黄，反之亦然）。

但是，主题更改仅在动画值更改后才会应用（状态从“打开”更改为“关闭”等），因此当我切换主题时，我会显示“陈旧”主题值，直到我也切换状态（开/关）。

任何帮助将不胜感激。

请参阅此codesandbox。

我有一个基本的成帧器运动动画，其中框的高度在切换时会产生动画效果。但是，我希望默认情况下显示该框，但是当页面加载时会显示初始动画。

我的问题是，如果组件应该在安装上显示，但仍保持未来的进入和退出动画，如何避免组件的初始动画？谢谢！

我认为渲染成帧器运动会重新执行我的动画，因为初始设置为隐藏，动画设置为显示。但这种情况并非如此。

我怎样才能让它在每次状态变化时重新播放动画？

import React, { useEffect, useState } from "react";
import { motion} from "framer-motion";
import styled from "styled-components";

const Screen = () => {
  const [state, setState] = useState(1);

  useEffect(() => {
    setInterval(() => {
      setState(Math.random());
    }, 4000);
  }, []);

  return (
    <Title variants={variants} animate="show" initial="hide">
      {console.log("re-render")}
      {`screen ${state}`}
    </Title>
  );
};

const Title = styled(motion.div)`
  color: red;
`;

export const variants = {
  show: {
    opacity: 1,
    y: 0,
    transition: {
      ease: "easeOut",
      duration: 0.3
    }
  },
  hide: …