标签: framer-motion

所以我\xc2\xb4m 目前正在重构一个网站，所以我对rrd 进行了重构，它在之前的网站版本中位于v5 上。\n现在，该组件\xc2\xb4t 不再存在，我们必须使用新组件你可能知道。

我之前使用framer-motion 在路线之间进行转换，如下所示：

<Switch location={location} key={location.pathname}>\n  <motion.div\n    initial="initial"\n    animate="in"\n    exit="out"\n    variants={pageVariants}\n    transition={pageTransition}>\n    <Route path="/audit" component={Audit} />\n    <Route exact path="/smartx" component={SmartX} />\n    <Route path="/smartx/erc20" component={TokenGenerator} />\n    <Route path="/createAudit" component={PaymentStatus} />\n    <Route path="/faq" component={FAQ} />\n    <Route path="/support" component={Support} />\n    <Route path="/terms" component={Terms} />\n    <Route path="/policy" component={Policy} />\n    <Route path="/about" component={About} />\n    <Route exact path="/">\n      <Redirect to="/audit" />\n    </Route>\n  </motion.div>\n</Switch>;\n

只需将 Switch 组件替换为 Routes 组件将不会\xc2\xb4 起作用，因为您只能将 Route 组件作为 的子组件。\n将 <motion.div> 在 Routes 组件上向上移动一层只会导致过渡中的一次初始淡入淡出页面加载时。

新的（不是安静的工作版本）：

我从今天起才开始使用 Framer Motion，我想知道是否可以在一张图像上运行多个动画，尤其是重复一个动画。基本上，我想让图像移动，然后对其施加重力效果。

我试图在进入视口时运行过渡。我希望卡片只是不透明...我的 div 中有一个代理元素，并应用背景过滤器来应用“磨砂玻璃”外观。当父级发生任何类型的不透明度更改时，过滤器根本不会应用并导致笨重的动画。这是上下文的 CSS：

.card {
  width: 100%;
  position: relative;
  min-height: 320px;
  border-radius: 12px;
  overflow: hidden;
  padding: 32px 24px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 45rem;
  margin: 8px 0;
  transition: all 0.4s ease;

.backdrop {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 12px;
    backdrop-filter: blur(32px) brightness(115%);
    background-color: rgba(255, 255, 255, 0.16);
  }
}

我也尝试过对孩子应用过渡，还尝试将以下内容应用于父母和背景：

  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-perspective: 1000;

我试图在下一个 js 中为我的组件设置退出动画，但我只能给出初始动画。

有人可以告诉我这里出了什么问题吗？

这是我的示例代码：

 <AnimatePresence >
        <motion.div key="modalBackground" className={styles['auth-modal-layout']} key="modalBackground" initial="hidden" animate="visible" variants={
                {
                    hidden:{
                        opacity:0
                    },
                    visible:{
                        opacity:1,
                        transition:{
                            duration:.4,
                        }
                    },
                }
            } >
            
            <motion.div key="modalForm" className={styles['auth-modal-form']} initial="hidden" exit="pageExit" animate="visible" exit="hidden"  variants={{
                hidden:{
                    translateY:100,
                    opacity:0
                },
                visible:{
                    translateY:0,
                    opacity:1,
                    transition:{
                        duration:.4
                    }
                },
                pageExit:{
                    opacity:0,
                    transition:{
                        when:"afterChildren",
                        duration:.4
                    }
                }
            }} >
                {modal()}
            </motion.div>
               
        </motion.div>
        </AnimatePresence> 

我正在尝试将我的react-router-dom更新到v6，但它似乎会导致成帧器运动AnimatePresence出现问题，特别是退出过渡。

在 App.js 中：

import { Routes, Route } from "react-router-dom";
import {AnimatePresence} from "framer-motion";  

import Home from "./Components/Home";
import About from "./Components/About";
function App() {
  return (
    <div className="App">

      {/* globals such as header will go here  */}

      <AnimatePresence exitBeforeEnter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
        </Routes>
      </AnimatePresence>
    </div>
  );
}

export default App;

然后在我的关于/主页组件中我有：

import {Link} from "react-router-dom";
import {motion} from "framer-motion";  

    function About() {
    
        const pageMotion = {
            initial: {opacity: 0, x: …

如何将 Tailwind CSS 类使用到成帧器运动对象中。

const variant = {
    hidden: {
      'w-0'
    },
    visible: {
      width: 400,
      transition: {
        type: 'spring',
        stiffness: 170,
        damping:30,
      }
    }
  }

  return (
    <div className='flex relative w-full h-full'>

      <button className='absolute z-40 top-0 left-0 origin-left bg-white rounded-lg px-6 py-2'>Open</button>

      <motion.div variants={variant} initial="hidden" animate="visible"  className="flex absolute bg-gray-100 top-0 bottom-0 ">
        some
      </motion.div>
      

    </div>
  )

在上面的示例中，我想在“隐藏”属性中使用任何 tailwind css 类，但不知道如何实现它。“w-0”应该是我的方法，但就像我在代码中显示的那样，它不起作用

\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 数据 …

我想知道是否有一种方法，以及如何实现，以某种gsap方式固定一个元素，但使用 FRAMER MOTION。为了做类似的事情：

https://codepen.io/hexagoncircle/pen/LYpaPQp

提前致谢 ！