问题标签 [reactcsstransitiongroup]

我使用一个函数来根据我的应用程序的状态输出必要的组件。我尝试使用ReactCSSTransitionGroup向过渡添加动画。但它不会起作用。在我的主渲染中，我这样做：

然后在 signupForm 函数内部：

我的CSS：

知道如何进行这项工作吗？

我有 2 条路径：

• /博客
• /博客/：蛞蝓

第一个路径的内容显示第二个路径的链接列表。单击链接时，将使用我的 App.js 文件中的 ReactCSSTransitionGroup 显示新页面：

现在在我的第二条路径 (/blog/:slug) 上，我检查 slug 并调用我的商店以获取该帖子的数据。如果不存在数据，我会显示 404 页面，否则我会显示帖子数据。

问题就出现在这个阶段。当我单击 Link 元素从有效的 /blog/:slug 页面返回到 /blog 时，在转换发生之前，我当前的帖子更改为我的 404 页面，然后转出以显示 /blog 页面内容。我做了几个测试，这些是我的发现：

• 单击 Link 元素时，BlogPost 组件永远不会命中 componentWillUnmount 生命周期函数
• 单击 Link 元素时，BlogPost 组件会尝试重新呈现自己。但是此时 /blog 数据已经在请求，没有找到 post.fields，因此在过渡之前显示 404 页面。
• 在为 404 不显示添加额外条件时（例如，如果我们确定没有帖子，则仅显示 404），我收到以下错误：

第一的：

其次是：

同样，这些发生是因为它试图在过渡之前重新渲染它，但是被请求页面的数据已经被获取，因此无法找到“createdAt”属性。

关于为什么我的组件试图根据新组件的请求重新渲染自己的任何想法？

我是新来的反应并尝试使用内联样式获取背景图像。但它不起作用。

显示错误“未定义 url”

起初，我想通过 ReactCSSTransitionGroup 制作一个轮播，但是有一个简单的 css 过渡。如果我想添加一些事件，它就无法工作。所以，我想使用 ReactTransitionGroup。但是一旦我使用它，我就无法得到我想要的一些钩子不起作用。

并非所有 ReactTransitionGroup 生命周期钩子都会触发！在上面的例子中，只有'将出现''确实出现'

日志。

如果 React 中存在错误？

我正在尝试制作一个可点击的内容窗口。单击后，窗口将发生变化。我希望屏幕上的内容淡出，新内容淡入。到目前为止，我已经完成了淡入（我认为）。淡出不会按计划进行。组件被推下屏幕并消失，之后甚至没有褪色。如果需要，我可以将实时版本上传到 GitHub 页面。

我读了这篇文章，我不确定是不是 React 版本搞砸了。我想说不是吗？

无论如何，这是主窗口的渲染功能：

这是CSS：

当我取消注释 .example-leave 下的可见性内容时，我使两个面板之一消失，但不会同时消失。

我正在遵循本指南。

有任何想法吗？我应该尝试做可见性的东西来让两个面板都消失吗？还是我应该尝试一种完全不同的方法？谢谢！

render()我的组件中的函数内部有此代码：

我的 CSS 文件中有这段代码：

我只是想让我div的方块从右边滑入，但什么也没有发生！找不到错误的代码，看起来一切正常。

我在连接 redux 和 ReactCssTransitionGroup 时遇到了问题。我想将旧元素移出并移入新元素。移动很好，但因为 redux 打破了 Parent/Child 道具关系，旧元素在退出之前用新数据渲染。

下面有一个小提琴，显示了与一个孩子的关系，只有一个层次。

对于这种情况，直接传递道具很容易，但我希望有一个解决方案可以更好地使用更复杂的结构：

触发转换时如何防止孩子更新？

https://jsfiddle.net/haygoodjon/wx0L0bx7/2/

^ 小提琴在将其从 dom 中删除之前正在更新旧时间。可以通过删除 Child 上的连接并直接从 App 传递 time 属性来实现预期的行为

我正在尝试制作一个包含 3 个组件的单页应用程序：Index、BluePage 和 GreenPage

我正在尝试使用 React 和 React 路由器来切换它们。布局如下：

这个视图应该像一个滑动页面，可以更好地可视化，如下图所示：

为了进行这些转换，我目前正在使用 ReactCSSTransitionGroup 和 CSS 类，但是这变得越来越困难，因为页面必须动画的方向取决于之前查看的页面。

例如，如果 BluePage 在视图中，并且用户按下了“返回”按钮，则索引应该从右侧移到视图中。

另一方面，如果 GreenPage 最初在视图中，则索引应该从左侧移动到视图中。

问题

• 如何使用 React Router 将现有路径发送到下一个组件，以便我可以正确地为组件设置动画？

• 我应该继续使用 ReactCSSTransitionGroup 还是应该在 componentWillMount 和 componentWillUnmount 回调中处理动画？

  • 如果是这样，如何在初始渲染后向对象添加 CSS 类？

如果这些问题看起来有些新手，我深表歉意——我仍然是 ReactJS 的初学者。感谢所有的帮助！

如果需要任何澄清，请告诉我。

我正在学习 React CSS 过渡。所以我决定做一个滑动侧边栏导航。侧边栏从右侧滑入就好了。但我无法让休假动画正常工作。我不确定发生了什么事。

jsx：

和CSS：

我有一个与 CSS 模块一起使用的 ReactCSSTransitionGroup（以及来自 react-router 的动态路由，但我相信这可以按预期工作）。

和过渡完美appear地leave工作 - 但enter过渡没有 - 它们只是立即出现，在新组件进入后前一个组件淡出。

CSS（使用 CSS 模块）：

- - 编辑 - -

我发现它在子路线上按预期工作（我的应用程序中只有一小部分）。包括子路由在内的所有路由都是动态加载的，所以我仍然不确定是什么原因导致它在这些情况下工作，但在其他情况下却不行。