标签: framer-motion

我有一堆使用 进行动画处理的元素AnimatePresence，但我不希望它们在组件的初始加载期间进行动画处理，而仅在与组件的后续交互期间进行动画处理。有没有一种简单的方法可以AnimatePresence首先禁用动画然后重新启用它们？

我知道我可以motion像这样直接应用于 element/HTMLtag：

<motion.div>some content</div>

但是我如何将其应用于此？

<Comp />

无需将其包装在另一个 HTML 元素中，例如在React-Transition-Group库中。

Framer API 提供了Frame组件，但它的行为就像具有自己样式的永久附加 HTML 元素，并且弄乱了我的布局。

我正在尝试使用 Framer Motion 为图像设置动画：

实用程序/MonkeyPicture.js

import React from 'react';

const MonkeyPic = () => {

        return (
            <div>               
                  <img
                    transition={{ duration: 0.5 }}
                    animate={{ rotate: [0, -30, 0]}}
                    id='monkeyFace'
                    src='/images/Monkey.png' />
                               
            </div>);         
}
export default MonkeyPic; 

所以我需要一个只添加或激活属性的函数： transition={{ duration: 0.5 }} animate={{rotate: [0, -30, 0]}} 当我点击一个按钮时。

图片一直在渲染，我只想在单击按钮时旋转它。

onClick 方法在 AddTodo.js 容器中：

            <button id='addTodo' onClick={() => {
                monkeySound.play(); 
                setShowFistBump(true);
                setTimeout(() => { 
                    setShowFistBump(false);
                }, 1000);

我只想知道是否有办法将framer-motion与Material-Ui 一起使用。我试过了，但我不明白。

我正在尝试使用 Framer Motion 创建一个 React 网站，问题是我的动画在桌面视图中看起来不错，但在移动设备中却不太好。现在我想禁用动画。我该怎么做呢？

请帮助我弄清楚如何停止和播放成帧器运动动画。或者任何其他可以与 ReactJS 一起使用的库，例如 GSAP 或 Lottie。问题是我需要在视频上添加动画元素。并且该视频可以像任何其他视频一样停止/播放。并且动画也需要停止/播放。我无法使用 FFmpeg，因为我只需要模拟这些，而不是制作实际的动画视频。谢谢！

根据文档，我可以使变体属性动态化：https://www.framer.com/docs/animation/##dynamic-variants。

但当我尝试使属性动态化时，这不起作用initial。

例如：

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

//make div appear from either bottom or right, depending on "origin" custom prop
const variant = {
  hidden: (origin) =>
    origin === "bottom"
      ? { x: 0, y: 200, opacity: 0 }
      : { x: 200, y: 0, opacity: 0 },
  visible: { x: 0, y: 0, opacity: 1, transition: { duration: 1 } },
};

function App() …

我在下一个 js 应用程序上遇到此错误，我什至不知道它的原因或来源，因为引发错误的代码甚至不是我编写的。

error - file:///Users/cheq/Desktop/cheqo/node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs:1
import { useContext, useId, useEffect } from 'react';
                     ^^^^^
SyntaxError: Named export 'useId' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const { useContext, useId, useEffect } = pkg;

当我从成帧器运动导入任何内容时，出现此错误，这是我的完整代码：

import React from 'react';
import { motion } from 'framer-motion';

function motionpage() {
  return (
    <> …

我正在使用成帧器运动来为一页中的多个元素设置动画。由于成帧器运动没有一种简单的方法可以在元素进入视口后对其进行动画处理，因此我使用此方法：

const controls = useAnimation();
const { ref, inView } = useInView();

useEffect(() => {
    if (inView) {
      controls.start("visible");
    }
    if (!inView) {
      controls.start("hidden");
    }
  }, [controls, inView]);

const fadeFromBottom = {
    hidden: {
      opacity: 0,
      y: -5,
    },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        type: "spring",
        delay: 0.4,
      },
    },
  };

return (
<motion.section
  ref={ref}
  variants={fadeFromBottom}
  initial='hidden'
  animate={controls}
>
   <img src={image} alt='image'>
</motion.section>

然而，这种方法只允许我为每个 .jsx 文件中的一个元素设置动画。如果我想在两个部分进入视口时使用不同的动画为其设置动画，我该怎么做？例如，我如何在不同时间使用不同的动画来制作这两个部分的动画？

<motion.section
  ref={ref}
  variants={fadeFromBottom}
  initial='hidden'
  animate={controls}
>
   <img src={image} alt='image'>
</motion.section>
<motion.section …

我真的很难在 React Router 版本 6 中实现一些东西，这在版本 5 中相对简单。

我不仅希望在路由之间设置动画（由于最近对库的提交，现在终于可以在版本 6 中实现），还希望为嵌套路由设置动画。想想滑动页面中的滑动页面。

这是我迄今为止所拥有的 CodeSandbox。

我正在使用 Framer MotionAnimatePresence来检测退出动画。但是 React Router 希望重新设置父路由的动画，即使只是嵌套路由发生了变化。

正如您在CodeSandbox 演示中所看到的，路线动画正常，但是当单击“下一个嵌套页面”链接时，它还会重新动画整个页面，这不是我们想要的。我想要的是第 1 页保持静态，而其嵌套路线动画。显然，当您单击“下一页”时，整个页面应该有动画效果（从第 1 页移动到第 2 页）。但我似乎无法鱼与熊掌兼得。

有人能够做到这一点吗？图书馆和更广泛的网络上的抱怨表明这目前可能是不可能的？