标签: react-transition-group

这应该是如此简单,但我已经打破了这几天.我正在尝试动画我的页面过渡.问题是文件SUCK.我一遍又一遍地跟着他们,尝试了各种方式,但无法让它发挥作用.

我想要做的是向右或向左优雅地滑动我的页面,并淡化在其后面优雅地卸载的那个页面.简单吧？我没有在我的网页上使用React Router.

我为此尝试了各种解决方案,但问题似乎在于卸载.更换页面后,现有页面可以在转换之前卸载.我正在使用react-transition-group发布我的尝试,尽管在这一点上,我会接受任何其他有效的解决方案.我不确定react-transition-group是否在实际上得到积极维护,因为还有很多其他帖子可以帮助我做出0回复.

所以在我的app容器上我想要这样的东西:

<App>
  <PageSlider>
     <Page key={uniqueId} />  <==this will be "swapped" through (Redux) props
  </PageSlider>

所以,根据我的阅读,我必须使用TransitionGroup容器作为我的PageSlider,以便它可以管理我的页面的进入和退出.所以这里:

 class PageSlider extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <TransitionGroup 
         component="div"
         id="page-slider"
         childFactory={child => React.cloneElement(child,
           {classNames: `page-${this.props.fromDir}`, timeout: 500}
         )}
      >
        {this.props.children}
      </TransitionGroup>

    );
  }
}

我还读过我需要做一个"童工厂"来启用现有的东西.我无法在文档中找到这样的例子.由于页面将来自不同的方向,我将向我传递我想要滑动页面的方向,这将告诉页面它获得了什么类.

现在,至于页面本身,我已经将它包装在CSSTransition中.文档中没有关于如何传递这些内容的好例子,所以我真的很困惑这里要做什么:

 class Page extends Component {
  constructor(props) {
    super(props);
  }

  render() {
   return (
    <CSSTransition>                   <==????????
      {this.props.children}           Do props get passed down?
    </CSSTransition>                  Which ones? 
 );                                   Does "in" …

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

我的页面过渡使用动画,但Link退出时,exiting动画被缩短,因为下一页已准备好进入.

我已经尝试延迟Link动作,但是当页面更改被延迟时,exit动画不会被触发,直到delay结束并且Link被动作.

delay在启动exiting动画的同时,如何更改页面onClick？或者,是否有更好的方法或props可用？

这是我的代码

Layout.js

class Layout extends React.Component {
  ...
  return (
    <Transition>{children}</Transition>
  );
}

Transition.js

class Transition extends React.Component {
constructor(props) {
    super(props);
    this.state = { exiting: false };
    this.listenerHandler = this.listenerHandler.bind(this);
  }

  listenerHandler() {
    this.setState({ exiting: true });
  }

  componentDidMount() {
    window.addEventListener(historyExitingEventType, this.listenerHandler);
  }

  componentWillUnmount() {
    window.removeEventListener(historyExitingEventType, this.listenerHandler);
  }

  static getDerivedStateFromProps({ …

我有以下App组件:

            <Route render={( { location } ) => (
                <TransitionGroup component="div" className="content">
                    <CSSTransition key={location.key} classNames="slide" timeout={{
                        enter: 1000,
                        exit: 300
                    }} appear>
                        <Switch location={location}>
                            <Route exact path='/' component={Intro}/>
                            <Route path="/history" component={History}/>
                            <Route path="/rules" component={Rules}/>
                            <Route path="/faq" component={Faq}/>
                            <Route path="/feedback" component={Feedback}/>
                            <Route path="/partners" component={Partners}/>
                        </Switch>
                    </CSSTransition>
                </TransitionGroup>
            )}/>

它工作正常,但每个动画立即执行.例如,如果我走的时候/rules到/history,我得到了这两个组件全动画,但历史组件需要从服务器获取数据,因此应用在集装箱空箱的动画.

我怎么能在react-transition-group组件中暂停动画？我有Redux,所以我可以loading在我的应用程序的任何地方更改变量.另外,我不想在app start上预加载商店中的所有数据.

我刚被这个击中。

原来在文件中 node_modules/@types/react-transition-group/TransitionGroup.d.ts

有这种类型：

  type TransitionGroupProps<T extends keyof JSX.IntrinsicElements = "div", V extends ReactType = any> =
        (IntrinsicTransitionGroupProps<T> & JSX.IntrinsicElements[T]) | (ComponentTransitionGroupProps<V>) & {
        children?: ReactElement<TransitionProps> | Array<ReactElement<TransitionProps>>;
        childFactory?(child: ReactElement): ReactElement;
        [prop: string]: any;
    };

这会使编译失败并显示以下错误：

ERROR in [at-loader] ./node_modules/@types/react-transition-group/TransitionGroup.d.ts:16:30 
    TS2707: Generic type 'ReactElement<P, T>' requires between 1 and 2 type arguments.

ERROR in [at-loader] ./node_modules/@types/react-transition-group/TransitionGroup.d.ts:16:45 
    TS2707: Generic type 'ReactElement<P, T>' requires between 1 and 2 type arguments.

我发现如果我替换掉它：

childFactory?(child: ReactElement): ReactElement; 

为了这：

childFactory?(child: ReactElement<any, any>): ReactElement<any, any>;

但这不是真正的解决方案，也不是我认为的问题...

我该如何解决？

演示我的问题的视频：https : //i.imgur.com/L3laZLc.mp4

我有一个简单的应用程序，您可以在其中将卡片添加到 2 个不同的行。当卡片添加到一行时，我使用react-transition-group触发“输入”动画。

但是，我还react-beautiful-dnd安装了启用在行之间拖动卡片的功能，以及重新排列行本身的顺序。但是当一张卡片被移动到一个新的行，或者当这些行被重新排序时，一些卡片的“进入”动画火，这看起来很奇怪，不应该发生。

拖动时，不需要的动画将在

1. 卡片被拖到不同的行。

2. 一行被重新排序，两行有不同数量的卡片。

奇怪的是，不需要的动画在以下情况下不会发生

1. 卡片被拖动到其原始行内的新位置。
2. 行被重新排序并且行具有相同数量的卡片。

我想知道我怎么能有这么的react-transition-group时候动画将不会触发state通过使用修改react-beautiful-dnd。

我的问题的沙箱（App.js文件中的评论中有更多信息）：

https://codesandbox.io/s/get-beautiful-drag-to-not-trigger-transition-group-tc40w?fontsize=14&hidenavigation=1&theme=dark

react-transition-group在我正在从事的gatsby项目中使用软件包时，我注意到了这种现象。我有一个“标签”列表，这些标签是从另一个主列表中选取的，它们被添加到活动列表中。单击主列表中的标签将其添加到活动列表中，然后单击活动列表中的标签将其删除。您几乎希望这样的事情会起作用。

过渡的作品不错，但转换时出的标签在一个陌生的方式重新组织起来。我们有五个具有以下值的标签：

• 无乳制品
• 派对食品
• 家庭大小
• 低胆固醇
• 低钠

如果单击该Family Sized标签将其删除，则会发生以下情况：

1. Family Sized 瞬间消失
2. Low Cholesterol并Low Sodium立即向左移动
3. 最后一个标签Low Sodium立即变为
4. 最后一个标签，现在具有Low Sodium过渡值

预期的行为是，Family Sized标记从组中间的位置过渡出来。我应该注意，如果您从活动列表中删除最后一个标签，则效果很好，只有在从其他位置删除标签时，才会发生这种情况。

这是过渡的慢速GIF，这是我的代码：

<TransitionGroup className='tag-container'>
  {filter.map((tag, index) => {
    return (
      <CSSTransition key={index} timeout={250} classNames={`tag`}>
        <TagButton value={tag} onClick={onClickFunction} className={`${screenStyle} active`}>{tag}</TagButton>
      </CSSTransition>
    )
  })}
</TransitionGroup>

• filter 是从组件状态变形的数组。
• 有一个<StaticQuery>从gatsby在相同的使用render()如果该事务的部件的方法。
• 的<TagButton>是从一个风格的部件styled-components包，而不是一个单独进口组合。

我开始使用 React-Router v6，并且遇到了动画路由转换的问题。

无论是反应路由器文档和反应过渡组文档指定不符合新的V6 API兼容的方式。

主要原因似乎是移除了<Switch>组件。

在 react-router@v5 中，这有效：

import { Router, Route, Switch, useLocation } from 'react-router@v5'
import { TransitionGroup, CSSTransition } from 'react-transition-group'

function App() {
  const location = useLocation();

  return (
    <Router>
      <TransitionGroup>
        <CSSTransition key={location.key} classNames="fade" timeout={300}>
          <Switch location={location}>
            <Route path="/a" children={<A />} />
            <Route path="/b" children={<B />} />
          </Switch>
        </CSSTransition>
      </TransitionGroup>
    </Router>
  );
}

...但是，在 react-router@v6 中，这不起作用：

function App() {
  const location = useLocation();

  return (
    <Router>
      <TransitionGroup>
        <CSSTransition key={location.key} …

我正在使用 react-transition-group 包，我尝试在 CSSTransition 组件上使用 nodeRef 道具，并在我的组件上添加了一个包装器，但我仍然收到有关 findDOMNode 的警告。

这是代码：

 <CSSTransition
        key={entry.id}
        timeout={500}
        classNames="timesheet-entry"
      >
          <TimesheetEntry
            taskOptions={taskOptions || []}
            deleteHandler={(event) => {
              deleteHandler(event, entry.id.toString());
            }}
            data={entry}
            dateChangeHandler={(date: Date) =>
              dateChangeHandler(date, entry.id)
            }
            hoursChangeHandler={(event) => hoursChangeHandler(event, entry.id)}
            taskCodeChangeHandler={(event, value) =>
              taskCodeChangeHandler(event, value, entry.id)
            }
          />
      </CSSTransition>

TimesheetEntry 组件的代码：

function TimesheetEntry(props: TimesheetEntryProps) {
  return (
    <div>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          label="Date"
          style={{ marginRight: '15px', height: '20px', marginTop: '-2px' }}
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          value={props.data.date}
          onChange={props.dateChangeHandler}
          size="small"
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        />
      </MuiPickersUtilsProvider> …

我正在使用React Router v4和react-transition-group v2来测试页面滑动动画.

const RouterMap = () => (
  <Router>
    <Route render={({ location }) =>
      <TransitionGroup>
        <CSSTransition key={location.pathname.split('/')[1]} timeout={500} classNames="pageSlider" mountOnEnter={true} unmountOnExit={true}>
          <Switch location={location}>
            <Route path="/" exact component={ Index } />
            <Route path="/comments" component={ Comments } />
            <Route path="/opinions" component={ Opinions } />
            <Route path="/games" component={ Games } />
          </Switch>
        </CSSTransition>
      </TransitionGroup>
    } />
  </Router>
)

而CSS:

.pageSlider-enter {
  transform: translate3d(100%, 0, 0);
}

.pageSlider-enter.pageSlider-enter-active {
  transform: translate3d(0, 0, 0);
  transition: all 600ms;
}
.pageSlider-exit {
  transform: translate3d(0, 0, …

目标

我目前正在尝试使用React-Transition-Group对表的行进出进行动画处理。可能会发生两种不同的情况：

• 表的全部内容将被交换（最常见的选项）
• 可以添加和删除单独的行

我现在在哪里

我使用此待办事项列表示例作为制作表格动画的起点。这是我的沙箱。

我的主要问题是当表数据被完全换出时，您可以同时看到两个数据集。当新数据滑入时，旧数据滑出。这会导致旧数据在过渡时向下移动（见下图）。

理想情况下，初始表数据在新数据进入之前会完全消失，但新数据会在旧数据存在时弹出。

代码

通过行映射的 Table Prop

  <table>
    <TransitionGroup component="tbody">
      {this.props.tables[this.props.currentTable].rows.map((row, i) => {
        return (
          <CSSTransition
            timeout={500}
            classNames="SlideIn"
            key={`${row}-${i}`}
          >
            <tr>
              {row.map((column, i) => {
                return <td>{column}</td>;
              })}
            </tr>
          </CSSTransition>
        );
      })}
    </TransitionGroup>
  </table>

更改表数据集的函数：

  changeTable = () => {
    this.setState({
      currentTable:
        this.state.currentTable < this.state.tables.length - 1
          ? this.state.currentTable + 1
          : 0
    });
  };