问题标签 [reactcsstransitiongroup]

问问题

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.

206 问题
Newest
Active
Bountied
318
Unanswered
0 投票
6 回答
4277 浏览

unit-testing - 在测试中禁用 React 的 CSSTransitionGroup

CSSTransitionGroup当元素出现在 DOM 中或离开 DOM 时，我使用它来为元素设置动画。它运作良好。

现在 - 我想对这个组件进行单元测试。我正在创建一个临时 DOM 节点并将其附加到<body>，我将组件渲染到其中，然后执行一些操作。结果，我希望一个子 DOM 节点消失。

问题： 应用了动画类，并且组件保留在 DOM 中，直到 CSS 动画结束。这意味着我的测试也应该等待几百毫秒，然后我才能断言该元素已消失。我不能那样做——我希望我的测试很快，因为那些是单元测试。

问题： 有没有办法在不向我的组件添加额外选项的情况下禁用 CSS 过渡？

我尝试了什么： 单元测试本身运行良好。我可以通过将参数传递给我的组件来摆脱动画，这将使它不使用CSSTransitionGroup。所以 - 最坏的情况 - 我会这样做。但我正在寻找更好的解决方案。

我还可以断言“-enter”/“-enter-active”/“-leave”/“-leave-active”类存在于相关元素上。不过，这似乎有点 hacky，因为我可以想象应用这些类的错误，但元素将保留在 DOM 中。我不想采用这种方法。

0 投票
1 回答
183 浏览

reactjs - React & React-Router & ReactCSSTransitionGroup

我正在创建一个具有三种状态的简单应用程序，并将 React 的路由器与 ReactCSSTransitiouGroup 一起使用。ReactCSSTransitionGroup 的默认行为很简单：

  1. 点击链接后追加/追加新的孩子
  2. 新孩子获得“app-enter”和“app-enter-active”课程
  3. 大孩子获得“app-leave”和“app-leave-active”课程
  4. 超时后删除老孩子

我想要做的是改变这种行为，使其表现得像这样：

  1. 点击链接后保持不变。只需添加到旧的子类“app-leave”和“app-leave-active”类。
  2. 离开超时后，删除旧孩子并使用“app-enter”和“app-enter-active”类附加新孩子。
  3. 输入超时后删除它的类

有什么简单的方法可以得到这个吗？谢谢！

0 投票
1 回答
946 浏览

css - ReactCSSTransitionGroup 没有为转换转换正确设置动画

我在路线之间添加动画没有问题。但是当我尝试如下简单的事情时：

CSS：

不透明度部分完美运行，但 translateX 部分根本不起作用。什么都没有动。

div的css ，#intro没有什么特别的，只有font，，，，text-alignwidthfloat:right

0 投票
1 回答
1004 浏览

reactjs - 我如何为固定数据表组件的单元格设置动画？

我正在使用 facebooks fixedDataTable 来显示股票仪表板。我需要实现的是基于价格变化的闪存固定数据表单元格（比如价格列）绿色或红色。我们如何在固定数据表中实现动画？

0 投票
2 回答
3039 浏览

reactjs - 如何在 React Router 中更新路由而不在单页应用程序中重新安装组件？

我正在寻找一种方法来“美观地”更新 React/Redux/React-Router/React-Router-Redux 应用程序地址栏中的路由，而不会在路由更改时实际导致组件重新挂载。

我正在使用 React CSS Transition Groups 为输入路线设置动画。所以当用户从

/home/

到

/home/profile/bob,

动画触发。

但是，一旦打开/home/profile/bob，用户可以向左/向右滑动以访问其他配置文件 -/home/profile/joe等等。

我希望地址栏中的 URL 在发生这种情况时更新，但目前这会导致profile组件重新挂载，这会重新触发 CSS 转换组，从而触发动画——我只希望在去的时候触发该动画从非配置文件路由到配置文件路由，而不是在配置文件路由之间切换时。

我希望这是有道理的。我本质上是在寻找一种方法来“美观地”更新应用程序 URL，而不强制重新安装管理该路由的组件。

0 投票
1 回答
824 浏览

javascript - 如何使用 es6 语法导入 ReactCSSTransitionGroup？

我正在尝试为我的 React 应用程序创建模态窗口，并且我正在关注本教程。

但是，我收到以下错误

这是我的代码

我安装了 react-addons-css-transition-group 通过npm install --save react-addons-css-transition-group

问题显然是 ReactCSSTransitionGroup 没有正确导入，因为用普通 div 替换它不会引发任何错误。

0 投票
2 回答
6015 浏览

javascript - ReactJS onClick ReactCSSTransitionGroup 动画

我是新来的反应和反应动画。因此，在页面加载时“出现”动画一切正常。但现在我有一个问题。当我单击导航时，我希望新的 div 不仅立即显示，而且缓慢淡入（或该mather的任何其他动画），但它不起作用。

TLDR；onClick 事件不会使它刚刚设置的动画成为一个新类。

另外，也许有人知道如何使 ReactCSSTransitionGroup 仅在我浏览到网站的某些部分时才起作用？谢谢你！

}

0 投票
1 回答
304 浏览

reactjs - 如何指定 ReactCSSTransitionGroup 中项目的顺序？

是否可以在 a 中指定项目的顺序ReactCSSTransitionGroup？

考虑其顺序很重要的项目列表。如果您想通过一个操作显示一个项目并隐藏其相邻项目，则会ReactCSSTransitionGroup混淆它们的顺序。看看下面的小提琴，这些项目应该是[1, 2, 3, 4, 5].

http://jsfiddle.net/mehranziadloo/kb3gN/15519/

是否可以告诉ReactCSSTransitionGroup（或ReactTransitionGroup）项目的顺序？

0 投票
1 回答
2714 浏览

javascript - ReactCSSTransitionGroup 不起作用

我试图让一个元素淡入，但它根本没有做任何事情。总体目标是在我切换状态时显示元素（通过单击和触发showOptions()）

不过，无论有没有这个点击处理程序，我似乎都无法让任何动画工作。

这是CSS

0 投票
1 回答
1178 浏览

javascript - 使用 ReactCSSTransitionGroup 在 React 中进行变量转换

ReactCSSTransitionGroup使用 CSS 文件来定义和存储过渡。这很好，效果很好。但是如果一个组件需要一个可变的转换配置，例如一个transition-duration从 0ms 到 10000ms 的变量呢？transition-duration当它存储在 CSS 文件中时，我将如何更改组件的 Javascript 类中的值？

例子：

假设您想要制作一个幻灯片组件，并且您想要实现一个选项来更改淡入淡出持续时间（动画从一张幻灯片淡入另一张幻灯片所需的时间）。你这样调用组件：

这是组件将过渡添加到将要呈现的幻灯片元素的方式：

这是ReactCSSTransitionGroup定义转换所需的 css 文件：

现在如何props.fadeDuration在组件内部使用来更改位于transition-durationcss 文件中的值？

到目前为止，我唯一想到的是，我必须使用refs和'Style Object' 'transition' 属性ReactCSSTransitionGroup手动删除并创建转换。这是要走的路吗？或者我该怎么做？


12345678910