标签: framer-motion

当我尝试使用成帧器运动为 div 做简单的动画时。我在浏览器中收到以下错误

/node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs

Can't import the named export 'Children' from non EcmaScript module (only default export is available)```

我在reactjs中从framer-motion模块进行命名导入时遇到此错误。Obs：我没有使用 webpack。

import { Fragment } from "react";

import classes from "./Hero.module.css";

import { motion } from "framer-motion";

import Header from "../header/Header";

export default function Hero() {
  return (
    <Fragment>
      <Header />
      <section className={classes.banner}>
        <img src="https://i.imgur.com/1arVXy2.jpg" />
        <motion.h1 className={classes.slogan}>Produtos de alta performance</motion.h1>
        <div className={classes['see-more']}>
          <span>Veja mais</span>
        </div>
      </section>
    </Fragment>
  );
}

动画存在退出道具不起作用

我做错了什么？

<AnimatePresence>
      <motion.div
        initial={{ opacity: 0, x: "-100%" }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: "100%" }}>
        <h1>Head</h1>
      </motion.div>
</AnimatePresence>

固定的！！

通过将这两个道具添加到 Switch 来修复它：

从“react-router-dom”导入{useLocation}；

const 位置 = useLocation();

<Switch location={location} key={location.pathname}>
//Routes
</Switch>

所以我react-router-dom使用相当非常规的标记结构来使用这种手风琴布局。

演示：https : //codesandbox.io/s/falling-violet-kvqn2?file=/ src/ Case.js

一个手风琴标题的缩短代码：

      <motion.div
        layout
        transition={transition}
        key={item.id}
        style={{
          flex: isActive ? 1 : 0,
          flexBasis: isActive ? null : 56,
          ...
        }}
      >
        <NavLink
          style={{
            ...
          }}
          exact={true}
          to={item.url}
        />

        <Route exact path={item.url}>
          <motion.div
            transition={{ delay: 1, ...transition }}
            variants={{
              open: { opacity: 1 },
              collapsed: { opacity: 0 }
            }}
            initial="collapsed"
            animate="open"
            exit="collapsed"
            layout
            style={{
              ...
            }}
          >
            <Home />
          </motion.div>
        </Route>
      </motion.div>

我正在尝试framer-motion在手风琴页面之间制作动画。就像下面的gif

您可以看到动画in过渡效果很好。但是很难exit在页面更改时为道具设置动画。单击手风琴标题，内容会突然隐藏。看起来它正在从 DOM …

这个错误刚刚开始随机发生：

但是，如果我制作一个传播道具并引入子项的包装组件，则不会出现错误：

const WorkingVersion = (props: {id?: number}) => <SimpleComponent {...props}><div>hello</div></SimpleComponent>

这个问题也不会发生在 codesandbox for typescript 上，这让我认为这是我的机器上的一个特定问题。

我尝试恢复到上一个​​工作版本，但它并没有解决我遇到的问题。

我应该寻找什么可能导致弹出此错误？

如何使用 Framer Motion 标签，并在animate和initial属性中应用一个类。就像这样。

<motion.div
  initial={{ className: 'hidden' }}
  animate={{ className: 'visible' }}
>
  <div>yo</div>
</motion.div>

我必须使用类，因为我正在使用tailwindcss。

我期望并希望有一种方法可以做到这一点，就像我上面展示的例子一样，只需将其放入渲染的 HTML 标签中，style="class-name:{class_name}"它绝对不会执行任何操作。

提前致谢。

使用成帧器运动，当我悬停在作为按钮的父元素时，我想为我的 Icon 组件设置动画以旋转 90 度。

<motion.button type="button" whileHover={{scale: 1.1}}>
    Visit our Industry 
    {/*Animate this Icon to rotate 90 degrees*/}
    <Icon type="arrow-up" /> 
</motion.button>

我看到了变体的使用，但不确定如何真正将它们与whileHover.

任何帮助将不胜感激，因为这是一个新事物。

当元素在视图中时（例如，当我们滚动到元素时），是否有任何内置方法可以使动画开始？

Framer Motion有安装动画部分，它说：

当组件安装时，如果它们与样式或初始值中定义的值不同，它将自动为 animate 中的值设置动画

所以我真的找不到一种直接的方法来让动画在出现时开始。

但是，我现在看到的唯一选项是使用动画控件，这意味着我必须手动在滚动上实现侦听器并触发control.start()，任何更简单的方法都非常感谢。

我正在尝试使用 react-testing-libary 测试拖放功能。拖放功能来自 framer-motion 并且代码在 reacy 中。据我了解，它使用 mousedown、mousemove 和 mouseup 事件来执行此操作。我想测试以下基本组件的拖放功能：

export const Draggable: FC<DraggableInterface> = ({
  isDragging,
  setIsDragging,
  width,
  height,
  x,
  y,
  radius,
  children,
}) => {
  return (
      <motion.div
        {...{ isDragging }}
        {...{ setIsDragging }}
        drag
        dragConstraints={{
          left: Number(`${0 - x}`),
          right: Number(
            `${width - x}`,
          ),
          top: Number(`${0 - y}`),
          bottom: Number(
            `${height - y}`,
          ),
        }}
        dragElastic={0}
        dragMomentum={false}
        data-test-id='dragabble-element'
      >
        {children}
      </motion.div>
  );
};

我有一个测试片段如下：

it('should drag the node to the new position', async () => …

一个简单的用例是允许用户单击按钮以在滑块中分页或拖动。两个事件都paginate使用参数调用相同的函数来前进或后退——简单的东西。

然而，拖动触发似乎会导致奇怪的行为，其中滑块想要从几张幻灯片开始动画，就好像它忽略了更新的道具一样。使用按钮时不会发生这种情况，并且两者都使用相同的简单paginate调用。

任何提示表示赞赏。

最小的例子：

export default function App() {
  const [position, setPosition] = useState<number>(0);

  const paginate = (direction: Direction) => {
    setPosition((prev) => {
      return direction === Direction.Forward
        ? Math.max(-800, prev - 200)
        : Math.min(0, prev + 200);
    });
  };

  return (
    <div className="App">
      <Slider>
        <Wrapper
          animate={{ x: position }}
          transition={{
            x: { duration: 1, type: "tween" }
          }}
          drag="x"
          dragConstraints={{
            top: 0,
            left: 0,
            right: 0,
            bottom: 0
          }}
          onDragEnd={(e, { offset, velocity }) => …