问题标签 [react-transition-group]

我正在尝试在 Next JS 中设置一个相对简单的页面转换。我使用 GSAP TweenLite 作为我的动画库，我是 react-transition-group 来处理转换，我试图在 Next.js 6.0 中引入的 _app.js 组件中完成所有这些工作。我让它“有点”工作，但它并没有完全按照我的意愿去做。

我遇到的问题是，当一条新路由被命中时，该路由的页面组件会立即在 DOM 顶部过渡，而退出组件被推到页面底部，直到它过渡出来并卸载。

我想要它做的是转换并卸载当前页面组件，然后在路由更改时转换并安装新的页面组件。如果有人对我如何更好地进行设置有任何建议，我将不胜感激。

使用 React Transition Group v2，我希望能够在文本元素和加载微调器之间平滑过渡。

没有任何CSSTransitionGroup元素，我有以下代码：

我最初的和幼稚的处理方法是使用以下内容：

但这不是一个好的解决方案，因为三元运算符已经消失，并且in存在重复的 prop，以及重复的classNames. 它确实在两者之间进行了过渡，但是随着每个组件的进出，过渡是粗糙的。

是否有一个巧妙的解决方案可以在三元运算符中呈现的两个组件之间进行转换？

我想构建一个与转换一起使用的单页应用程序，如下所示：

基本上，当您第一次访问网站时，您会到达登录屏幕。从那里，有 3 个链接可用，“传记”、“商店”和“联系方式”（“联系方式”可从三个“顶部”页面获得）。

单击链接转到“商店”或“传记”后，您可以返回登录页面或转到联系页面，但不能转到“相反”页面（因此是架构）。此外，当您进入联系页面并单击“返回”时，您将回到之前的最后一页。

我创建了一个CodeSandBox以避免粘贴半公里的代码，这些代码与此无关但仍然有点担心

所以我希望能够精确地设置我的过渡，比如去“传记”时从左到右（离开时相反）​​，去“商店”时从右到左，去到时从下到上联系表格。

在阅读了大量关于 的问题和文档后react-transition-group，我想到了做这样的事情：

我可以这样做或<CSSTransition />为每种可能性创建一个，我真的不知道。

我的问题是我需要告诉它<CSSTransition />点击了什么或（更好地）它需要显示什么过渡。

为此，我尝试设置一个transition状态，但它看起来更新得太多了，而且我对 React 的了解也很生疏，我不知道如何使用 react-route 来处理这一切。

更新

谢谢大家的回答，也很抱歉没有更快地回答，我的电脑快死了。

因此，我创建了一个新课程CSSTransitions，在其中复制/粘贴了@brandon 的答案，同时适应了我的需求。但是，我有一个问题componentWillReceiveProps(nextProps)，因为它 nextProps.location 为空，不知何故，react-router 的上下文没有通过。

我更新了我的 CodeSandBox，CSSTransitions该类位于“src”目录内的“utils”目录中。

再次感谢您的回答

先感谢您

我看过ReactTransitionGroup的例子。在这些示例中，我们正在为待办事项列表的新表行和已删除表行设置动画。示例中显示的动画是淡入淡出动画。如何扩展/缩小表格行而不是淡入淡出动画？

我的组件代码：

我的 CSS：

它不做任何高度动画！

我是新来的反应 - 我确定这是一个简单的问题，但我在找出解决方案时遇到了很多麻烦。

所以我有两个按钮。Onclick 第一个按钮它应该打开淡入，如果我点击同一个按钮（button1）或者如果我点击按钮（button2）它应该淡出。button2 相同。到目前为止，我设法弄清楚淡入淡出是如何工作的，但无法解决淡出问题。

请帮助有关代码。

提前致谢。

第一张截图

第二个截图

我有一种情况，我需要为我已经使用JSON支持创建的 React 应用程序创建翻译支持，react-i18n但现在我决定使用添加 HTML 模板来创建新功能，就像它在 PHP 中使用的那样我如何实现它以及你认为哪种方式更有效。

我搜索了这个问题，但我找不到原生 react-transition-group 的解决方案。

我有 2 个组件 Home 和 Order。我对这些使用路由转换。这些平坦的路线一切正常。

我想对 Home 组件中的子路由使用路由转换。但是当我想为子路线设置动画时，总是会为 Home 组件设置动画。您可以在下面找到子路线。

这是家庭组件的图像。

如何仅对子路线进行动画处理？

感谢您的帮助

如何使用 react-transition-group 更改转换（2.4.0，如果重要的话）？

我目前有以下结构（使用 react-router）

它适用于 fixed classNames，但我希望某些页面具有不同的过渡。

如果我只是更改 的classNames，CSSTransition它似乎会破坏状态，它最终会放置-enter-done新动画的-enter类，但旧动画的类仍然存在。

这应该很简单，但我已经为此烦恼了好几天。我正在尝试为我的页面转换设置动画。问题是文档很烂。我一遍又一遍地跟踪他们并尝试了各种方式，但无法让它发挥作用。

我想要做的是优雅地向右或向左滑动我的页面，并将正在优雅卸载的页面淡出它后面。简单吧？我没有为我的页面使用 React Router。

我为此尝试了多种解决方案，但问题似乎在于卸载。当页面被替换时，现有页面在它可以转换出来之前被卸载。我正在使用 react-transition-group 发布我的尝试，但在这一点上，我会接受任何其他有效的解决方案。我不确定 react-transition-group 实际上是否得到了积极维护，因为还有许多其他帖子寻求帮助，只有 0 个响应。

所以在我的应用容器上我想放这样的东西：

因此，根据我的阅读，我必须为此使用一个 TransitionGroup 容器作为我的 PageSlider，以便它管理我的页面的进入和退出。所以这里是：

我还读到我需要做一个“子工厂”来启用现有的东西。我在文档中绝对找不到这样的例子。由于页面将来自不同的方向，我将传递给它我想要滑动页面的方向，这将告诉页面它得到什么类。

现在，至于页面本身，我已经将它包装在一个 CSSTransition 中，就像这样。文档中没有很好的例子说明这一切是如何传递下去的，所以我真的很困惑在这里做什么：

只是为了完成样式将在 CSS 中应用，如下所示：

所有这些组件都将通过 Redux 连接，因此它们知道何时触发了新页面以及调用了哪个方向。

有人可以帮我解决这个问题吗？我确实花了几天时间尝试了那里的每个图书馆。我不喜欢反应过渡组！任何适用于卸载的库我都会尝试。为什么这不容易？

无法弄清楚如何解决动画高度或修复重复代码的问题

理想情况下，我会有这样的东西，但这种方法的问题是，如果我理解正确，何时editMode包装falsediv 不再存在。 代码框示例 no1 在这里！

虽然在这个代码框示例中，我有重复的代码，这不是理想的 imo。

我对这一切都很陌生，现在坚持了几天。

抱歉英语不好，不是我的母语