问题标签 [react-animations]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
385 浏览

javascript - 每次父动画开始使用成帧器动作和反应时,我如何才能使子动画发生

我正在尝试使用成帧器运动和反应重复制作挤压气泡动画,但我无法在每次运动动画开始时都发生挤压动画。

相反,只有在动画第一次运行时它才有效,但在那之后只有运动动画会自我重复,如果我尝试重复挤压动画,它就会出现故障

0 投票
0 回答
105 浏览

reactjs - 反应原生动画值作为函数参数

我是 React native 的新手,学习 Animation 发现了 Blow 代码,差不多一个星期试图了解如果它在构造函数中如何继续调用此函数,以及文档中描述的这种技术在哪里,请解释甚至更好地参考文档在哪里描述。

this._x = fixValue(this.pan)

完整代码:

https://snack.expo.io/gf97TEON4

0 投票
1 回答
45 浏览

javascript - 从另一个组件到达组件内声明的对象 - React Native

我正在构建一个小型语法应用程序。我在这里简化了,在小吃

到目前为止,上述应用程序做了什么

该应用程序根据我们对文章和名词性别的选择来获取和打印示例句子。

目标

My aim is, whenever a type of word is chosen (article or noun), to light up the color of the type of word chosen. (例如,如果选择了定冠词,则将'The'例句中的黄色变黄几秒钟)。然后将文章/名词恢复为黑色,就像句子的其余部分一样。

我的尝试

我已经animatedTextColor在单独的文件中声明了变量

用于SampleSentencesEnglish对象的样式。

我已经包装stylesSampleSentencesEnglish在一个组件内可以使用useSelector

现在,问题是,我无法 SampleSentencesEnglish 从另一个组件访问组件内部的对象MainApp.js

是一个不工作的版本。它具有TextColorAnimation.jsTextColorRedux.js文件作为额外内容,并且SampleSentences.js与第一个链接相比具有模块。

谢谢阅读。希望可以理解。

0 投票
0 回答
14 浏览

reactjs - react-animations 与 material-ui 中的网格系统有冲突

在这段代码中,我使用了两个库。Material-Ui 和 Rect-Animation。我使用处理程序来改变状态,当状态改变时,我想显示不同的东西。我认为 AnimateOnChange 将其子项的显示更改为类似 flex 的内容,我不知道。有人能帮我吗?

0 投票
0 回答
63 浏览

reactjs - 在 React-Native 中渲染屏幕内容之前渲染底部标签动画。需要一个用于滞后动画的 Workarround

我正在将此库用于动画底部选项卡导航器(为方便起见,调用 BTNav)。它为选项卡容器组件的位置和宽度设置动画。 在此处输入图像描述

问题是,当导航到之前未渲染的屏幕时,动画开始滞后。这种行为的原因是,屏幕组件和动画的渲染由单个主线程处理,如此 freecodecamp 帖子中所述

我无法使用创建类似的动画,useNativeDriver:true因为它不支持此处提到的位置和宽度动画。

有什么方法可以使用生命周期钩子或其他方法,以便在 BTNav 的动画结束之前不会渲染屏幕?

或者是否可以在首次渲染 BTNav 时预先渲染所有屏幕(与 BTNav 相关)

0 投票
1 回答
349 浏览

reactjs - React-Transition-Group:在 StrictMode 中不推荐使用 findDOMNode

我正在使用动画库react-transition-group来为 TODO 列表设置动画<TransitionGroup><CSSTransition>如下所示

但我在控制台中收到如下错误:

在此处输入图像描述

我读到了关于使用这个官方变更日志git 问题中提到nodeRef={nodeRef}的元素,如下所示,但后来它开始表现得很奇怪,即一些元素在 UI 中没有正确显示,如下面的代码片段截图所示:CSSTransition

此截图是申请后nodeRef截图CSSTransition 在此处输入图像描述

0 投票
1 回答
42 浏览

css - 在 React.JS 中映射元素时的过渡效果

我如何在映射元素时获得过渡效果,例如:基于http://reactcommunity.org/react-transition-group/css-transition 我希望每个元素映射不透明度为 0,并且在 1 秒内不透明度增加到 1。我已经创建了如下所示的内容,但是没有出现任何效果。

CSS:

0 投票
1 回答
2003 浏览

javascript - 如何在 react native 中创建自定义动画浮动标签 TextInput?

我在本机反应中创建了文本框,

在此处输入图像描述

但是我希望标签在 isFocused 或填充一些值时以动画形式出现在框外,例如:

在此处输入图像描述

如果值为空或为空框内的标签,否则在外面

我的代码是:

风格 :

0 投票
0 回答
23 浏览

reactjs - 3d-react-carousel 停止反应动画

我想从我的项目中停止 3d-react-carousel 的动画,但我在它的文档中找不到任何有用的东西。每次页面重新呈现时都会出现动画。知道如何解决这个问题吗?

这是图书馆: https ://www.npmjs.com/package/3d-react-carousal

0 投票
0 回答
42 浏览

react-native - 自定义滑动底部标签栏动画问题

我为我的应用程序制作了一个自定义的滑动底部标签栏动画。但问题是,当我单击底部图标进行导航时,它不起作用,我必须单击两次才能使动画工作。
是相同的gif。
我有我的程序,如下所示。