TransitionGroup需要486秒来删除500个组件

文章/答案/技术大牛

发布

1回答

react-transition-group

我使用的是<TransitionGroup/>和<CSSTransition timeout={2000}>...，所有的转换都设置为在CSS中使用2000ms。如果我添加然后删除一小部分条目，大约需要2000ms才能像预期的那样调用onExited()。但是对于500个条目，它需要TransitionGroup 48秒(铬)或486 (！)删除500个元素后，在最后一个元素上调用onExited()之前的秒数(firefox)。为什么会这样呢？这使

浏览 18提问于2020-03-18得票数 0

1回答

React.Js TransitionGroup (反应-过渡-组)不起作用。

reactjs、gsap、react-transition-group

我试图从反应过渡组调用特殊的生命周期挂钩来使用gsap来实现动画。但是TransitionGroup组件阻止了Box组件的呈现，如果我从页面组件中删除TransitionGroup组件，则Box组件呈现。请帮我找出问题import TransitionGroup from 'react-transitio

浏览 4提问于2017-12-13得票数 0

1回答

反应-过渡-组没有生命。

javascript、css、reactjs、frontend、react-transition-group

我使用React和tranct-transition group来编写旋转木马组件。import { CSSTransition, TransitionGroup> <div className=

浏览 6提问于2022-04-04得票数 1

回答已采纳

2回答

如何使用的过渡组件来动画化将项添加到列表中？

javascript、reactjs、material-ui

我有这门课。 constructor(props) { items: [] this.clear = this.clear.bind(this); this.setState(prev => { return {

浏览 0提问于2020-06-23得票数 9

回答已采纳

1回答

在TransitionGroup中通知子组件的转换状态

reactjs、reactcsstransitiongroup

我使用TransitionGroup组件来提供页面转换效果，当用户通过一个类似旅程的界面时，它会用新的组件替换现有的组件。const { stepId, children } = this.props; <CSSTransition> 这一切都很好用，除了孩子们需要在他们被呈现时立即触发一些工作。CSSTransition公开了一个onEnt

浏览 2提问于2019-04-12得票数 1

1回答

findDOMNode在StrictMode中不受欢迎。警告-反应-过渡-组+反应v17 + Javascript (非类型记录)

javascript、reactjs、react-transition-group

为了消除警告，我需要对每个useRef元素使用CSSTransition挂钩，并将其与(它是子元素？)连接起来。我不能在组件的呈现函数中使用useRef()，所以我定义了一个新组件来显示每个TransitionItem只有当我将CSSTransition组件移动到新的TransitionItem组件中时，“闪烁

浏览 1提问于2021-11-07得票数 1

1回答

如何使用react transition group的CSSTransition动画嵌套路由？

javascript、reactjs、animation、react-transition-group

我需要在嵌套的路由中做一些动画(使用react Transformation-Groupv5.2.0来实现它的价值)。它们只是没有动画，而且它们预期的来自CSSTransition的类没有按预期注入到组件中(*-enter、*-enter-active、*-exit、*-exit-active)。具有嵌套路由的当前组件如下所示： const { params } = useRouteMatch() || {} const history = useHistory

浏览 1提问于2021-04-06得票数 1

1回答

反应-过渡-团体有条件地活出来。

reactjs、react-transition-group

这是我的一般设置，我有列表组件，它呈现了许多子组件。有许多交互会导致从此列表中添加/删除项。其中一些操作需要使用动画将组件删除，但我似乎无法做到这一点，我猜我可能在这里遗漏了一些东西。这是我的基本设置： {this.props.item.map(item => ( <item.sh

浏览 2提问于2018-05-11得票数 1

回答已采纳

2回答

当尝试添加带有表单的新帖子时，我会得到一个错误

javascript、reactjs

我正在创建一个像博客一样的react应用程序，我有一个主页，当你点击一个帖子时，我的所有帖子都会显示出来，然后点击一个包含评论和按钮的细节页面，打开一个模式来添加评论。我试图在主页上添加一个按钮来添加一个新的帖子，但是我得到了这个错误：NewPostForm.handleNewPostthis.props.postNewPost( values.userId, values.title, values.body); 100

浏览 1提问于2019-12-18得票数 1

回答已采纳

2回答

React按钮onClick已正确绑定，但无法工作

reactjs、html、react-router、react-bootstrap、react-transition-group

react组件中的按钮在呈现DOM时不提供onClick中的函数。检查元素显示按钮元素的属性有f noop()我试着在没有facebook和JSX的情况下呈现这个按钮，但是它没有改变任何东西。下面定义了this.plugin，但是我<em

浏览 1提问于2019-03-24得票数 0

1回答

右、左滑行反应过渡组

reactjs、react-transition-group

我想用react-transition-group.制作左、右幻灯片当我按下next按钮时，它就会向右(下一步)，当我单击“后退”按钮时，我想要从左边来。我的代码总是从右边得到的。

浏览 3提问于2021-11-02得票数 3

1回答

React、TransitionGroup、Velocity.js -使路线变换动画垂直对齐

javascript、css、reactjs、velocity.js

我正在使用React TransitionGroup和Velocity来为路由之间的过渡设置动画效果。

浏览 9提问于2016-08-28得票数 0

回答已采纳

2回答

如何将URL参数从反应性路由器发送到工具栏？

reactjs、react-router

<div> <TransitionGroup</Switch> </TransitionGroup)}

浏览 0提问于2018-06-22得票数 2

回答已采纳

2回答

如何在Reactjs中点击图片打开页面？

reactjs

在我的React项目中，我创建了一些带有图像的卡片。当点击该图像时，预计会在新窗口/页面中打开该特定产品的详细信息，但这并没有发生。请看下面的代码。 Projects.js <Link to={{ pathname: `/details/${data.id}`}}> waves style={{borderRadius:'10px'}} style={{height:'30

浏览 47提问于2019-12-16得票数 0

回答已采纳

1回答

有条件呈现的组件之间的React转换

reactjs、react-transition-group、reactcsstransitiongroup

当我点击3个有条件渲染的组件时，我试图在它们之间转换。我正试图通过在react-transition-group中使用TransitionGroup来实现这一点。null} )} </div> 虽然此代码适用于每个条件渲染的进入状态，但退出动画不起作用，因为组件在转换组可以应用以下是这些组件的handle函数： handleValid

浏览 25提问于2020-04-02得票数 0

3回答

接收单个React元素子级时出现错误React.Children.only

reactjs、jsx、create-react-app

我正在使用create-react-app，并尝试将我的所有组件呈现到相应的根div中。问题是，我能够将所有组件呈现到页面上，除了最后一个组件Score组件。我甚至尝试过将该组件放入div中，但仍然遇到以下问题：这到底是什么意思？这是我的App.js结构。

浏览 1提问于2017-05-29得票数 4

回答已采纳

1回答

反应过渡组: TransitionGroup的目的是什么？

reactjs、react-transition-group

我希望使用库来动画我的反应页面中的一些东西。根据这些文档，TransitionGroup组件执行以下操作：考虑下面的例子。当项被移除或添加到TodoList时，in支柱会自动切换。我不太清楚这意味着什么，也不知道为什么这很重要。另外，当我修改它们嵌入到文档页面中的示例代码以便用标记替换标记时，一切似乎都正常(我可以通过单击它们来

浏览 0提问于2021-08-29得票数 1

2回答

使用ReactCSSTransitionGroup和React路由器可以实现复杂的动画吗？

reactjs、react-router、reactcsstransitiongroup

我想知道ReactCSSTransitionGroup是否适合我的用例。我在React Router中使用了这一点，因此整个页面转换看起来很简单，但以这种方式对特定元素进行动画处理似乎更具挑战性。

浏览 0提问于2016-04-04得票数 4

1回答

在另一个CSSTransition中嵌套CSSTransitions？

javascript、css、reactjs、react-transition-group

我可能会误解整个事情，但我正在尝试使用React和React Transition Group来制作一些css动画。但是对于我下面的代码，嵌套的(最后一个) CSSTransition组件不会触发exit animations。不能像这样使用React Transition Group吗？我希望这段代码足以说明它是如何构造的： <TransitionGroup component={null}>

浏览 1提问于2019-06-27得票数 4

1回答

使用React、GSAP和MobX重新呈现相同的组件。

reactjs、gsap、mobx、react-transition-group

我有一个类似调查的React应用程序，它使用各种UI组件将各种问题呈现到屏幕上。 </TransitionGroup> <button cl

浏览 1提问于2017-08-14得票数 1

回答已采纳

点击加载更多