问题标签 [react-animations]

AnimatePresence从这里使用framer-motion和外部父级的退出动画似乎不会触发。

输入动画会为所有 3 个元素触发。对于退出动画，只有 2 个孩子的退出动画会触发。外部父级消失，没有退出动画。是什么赋予了？

CodeSandbox：https ://codesandbox.io/s/dusty-badger-forked-yu5xm?file=/components/overlay.js

我正在使用 Framer Motion 在 React 中制作汉堡菜单动画。当我点击汉堡菜单时，侧边抽屉和导航项从左侧滑入。

当我单击关闭菜单图标时，整个侧抽屉滑到左侧（这意味着 SideDrawer 组件上的退出道具正在工作）。

我想要什么？ 当我单击关闭图标时，我希望导航项先滑出，然后再滑出侧抽屉。我尝试将退出道具添加到儿童导航项。但它不起作用。

我怎样才能达到预期的效果？

代码片段如下：

src/App.js

src/components/Menu.js

src/components/Overlay.js

src/components/SideDrawer.js

如何使用 React 中的单词列表实现此动画？

我正在使用 SectionList 并且选项卡呈现为几个元素，活动以黑色背景突出显示（见下图）。如何使选定的选项卡与动画一起被选中，而不仅仅是出现？

这是今天的样子

• 项目清单

我正在尝试在本机反应中构建指南针。为此，我安装了这个包npm i react-native-compass-heading。包装工作正常，但图像在旋转时有点晃动。图像正在旋转，因为度数是动态变化的。图像transform rotate在没有动画的情况下发生。我想如果我在旋转时使用动画，那么这个问题将得到解决。但我不知道如何在本机反应中使用动画。如果有人解决了这个问题，这对我很有帮助。

这是包的代码用法：

如果我用动画改变了{transform: [{rotate: ${360 - compassHeading}deg}]}样式，它可能会解决问题（只是我的看法）。

所以我正在尝试使用 react-transition-group 来动画应用程序不同部分之间的过渡。

我有我想要在 CSSTransition 组件中通过以下方式制作动画的组件：

另外，我的 CSS 中有以下代码：

出于某种原因，我还不能理解这是行不通的。有人对此有答案吗？

完整代码可在此处获得：https ://github.com/coccagerman/bond

提前致谢！

我正在尝试 React Animation 的示例代码：

1. https://reactjs.org/docs/animation.html
2. https://github.com/reactjs/react-transition-group/tree/v1-stable

演示：

https://codesandbox.io/s/dark-forest-ofzfr?file=/src/App.js

它认为不App存在于index.js. 但是如果CSSTransitionGroup被一些静态文本替换，那么它就可以工作（没有任何动画效果）：

https://codesandbox.io/s/blue-dust-j0y57?file=/src/App.js

与以下相同ReactCSSTransitionGroup：
https ://codesandbox.io/s/quizzical-franklin-j2hhp?file=/src/App.js

它如何工作？

有人可以帮我解决我的问题吗？我需要在我的反应项目中使用 png 图像制作动画。我的img必须在自己的街区从右到左移动，在右侧和左侧的末端反向。我编写了一部分代码，但不明白如何进行反向操作？我使用反应弹簧。const [key, setKey] = useState(1);

return <animated.img img className={classes.fishPicture} style={styles} src={fishOne} alt="fish"/>

嗨，我是刚从学校毕业的新开发人员，所以我正在做一个投资组合项目。如果这个问题看起来很愚蠢，请提前道歉。

我有一个轮播，在我的屏幕顶部显示一个图像库，在第二（下）半部分显示一个垂直平面列表。

如何让下半部分在向上滑动时进入全屏并在向下滑动时返回半屏？react-native-gesture-handler 只提供左右滑动而不是上下滑动。

我正在使用 framer-motion 为一页中的多个元素设置动画。由于 framer-motion 没有一种简单的方法来为元素在视口中设置动画，因此我使用了这种方法：

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