问题标签 [react-transition-group]

https://www.wealthsimple.com/en-ca/culture/

如果您在内部页面上滚动任意数量并导航到另一个页面，它会快速跳转到页面顶部，然后进行页面转换。

我有转换容器作为 pos:ab。任何想法为什么会发生这种情况？

使用 CSSTransition 组件和 React 我想应用淡入动画

在这里你可以找到我想要实现的一个小例子：https ://codesandbox.io/s/j75712qjvy

在第一次加载时，文本会淡入，但在单击下面的某些按钮时不会再出现。

每次单击一个按钮时，状态都会更新并重新呈现组件。所以我的期望是fadeIn 动画应该重新启动。

我忽略了什么？

我正在使用 React，我正在尝试Fade使用 React-transition-group 创建一个组件，以根据状态中存储的条件淡入和淡出元素：http ://reactcommunity.org/react-transition-组/css-过渡/

这就是我现在所拥有的：

这是CSS

安装组件后，不透明度会在 0.5 秒内从 0 过渡到 1。但是当它卸载时，它没有动画：组件在没有过渡的情况下消失。

我用这个组件制作了一个沙箱来测试它：https ://codesandbox.io/s/k027m33y23 我确信这是一种常见的情况，但我找不到在卸载时为组件设置动画的方法。如果有人有任何想法，将非常欢迎！

-- 编辑 -- 正如@IPutuYogaPermana 所说，CSSTransition 中的条件渲染不是必需的。所以这：

应该是这样的：

该组件将根据inCSSTransition 组件中的属性自动挂载或卸载。这里是codesandbox中的最终代码：https ://codesandbox.io/s/62m86nm7qw

我在ReactJS和GatsbyJS (V2) 项目中使用react-transition-group 。

我的页面过渡与动画一起使用，但是当Link退出时，exiting动画被剪短，因为下一页已准备好进入。

我尝试过延迟Link操作，但是当页面更改被延迟时，exit动画不会触发，直到delay结束并且Link被操作。

如何在启动动画delay时更改页面？或者，有没有更好的方法或可用的？exitingonClickprops

这是我的代码

布局.js

过渡.js

盖茨比-config.js

getTransitionStyle.js

给定下面使用 React 转换组的 React 组件，我怎样才能让转换动画在组件加载时呈现？

从“反应”导入反应；从'react-transition-group'导入{TransitionGroup，Transition}；

我正在尝试将 gsap 用于动画，并希望在提供的函数上调用它们。进入的工作，但不能让退出和退出的开火。我在单击时设置了一个状态变量以更改为 false，但它不会重新渲染。我错过了什么，因为我在文档中看不到任何东西

编辑：只是为了在我的 app.js 中添加有关构建的更多信息，我有这个

所以这在整个页面上做了一个很好的小转换，顶部的前一个代码是路由的一部分（主页）

我试图让这个组件在安装时移入但得到

这是一个简化的代码（我已经准备好了所有的 CSS 类）：

https://codesandbox.io/s/rj5046zxoo

我是新手，我在我的项目中添加了 react-transition-group 以添加动画影响页面之间的过渡。我的 CSSTransition 没有呈现，我不确定如何解决这个问题。

这是我的代码：

我用于在页面之间转换的 CSS 如下：

我错过了什么？对此问题的任何见解将不胜感激。

我正在尝试将我的应用程序从旧应用程序迁移到新API，但如果使用手动模式来创建特定 React 组件的转换React-trancition-group，这并不容易。<Transition>

我的动画逻辑是：

我们有一个组件数组，他的每个孩子在<TransitionGroup>API 中通过onClick动作一个接一个地出现。<Transition>每个新的收入组件都可以平滑地替换和隐藏API中已经存在的前一个收入组件。

我几乎在react-trancition-group.v2 中解开了这个纠结，但有一件事仍未解决 - 已经在<Transition>API 中的组件在覆盖新组件后并没有消失，react-trancition-group而是在 .v1 中自动发生。所以现在他们都只是堆叠在一起......

所以，也许你可以看看我的代码，幸运的是我的问题出在哪里......

我将不胜感激任何帮助。谢谢你的时间

我的代码：

```

我正在使用_app.jsNext.js 的新文件来尝试创建页面转换，例如淡入淡出或幻灯片，但我无法理解它。我正在使用样式化组件来应用样式。我的结构目前看起来像这样：

_app.js

组件/PageTransition/index.jsx

组件/PageTransition/index.style.js

这是一个正确的方法吗？如果是这样，我认为 componentDidUpdate 还不足以赶上页面更改。我对这项工作的尝试，但它进行了渲染，并且在状态再次更新之前您会看到页面的闪烁，以告诉它开始淡出然后淡入。我需要在渲染之前更新状态。

有没有办法用 React Transition Group 来处理这个问题？我确实查看了next-page-transitions但对包的使用率低感到不舒服，我只是想要一个更简单的解决方案。