标签: react-transition-group

我正在使用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, …

演示和代码 => https://codesandbox.io/s/73ymn2k911

根据我通过开发工具的观察，它最初知道放置组件的位置，但忘记设置opacity: 1或删除旧组件

我怀疑问题出在 app.js请参阅下面的更新。

import React, { Component } from "react";
import { Route, matchPath } from "react-router-dom";
import TransitionGroup from "react-transition-group/TransitionGroup";
import AnimatedSwitch from "./animated_switch";
import { firstChild } from "../utils/helpers";

import TopBar from "./top_bar";
import Home from "./home";
import Projects from "./projects";
import ProjectItem from "./project_item";
import Missed from "./missed";

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            projects: []
        };
    }
    componentDidMount() {
        fetch("https://jsonplaceholder.typicode.com/posts")
            .then(response => …

我已经创建了一些动画，我想用它们在我的应用程序中的路由之间导航。我在某些页面上有一个后退按钮，允许用户弹出导航堆栈以访问最近的页面。我想要两种不同的动画，一种用于在堆栈中更深入地导航，另一种用于弹出回到最近的页面。我想使用history.goBack()，但似乎无法传递状态并因此使用不同的动画。

我使用这篇文章来弄清楚如何为我的组件设置动态动画，但除非我使用，否则我history.push({pathname, state:{animation, duration}})不知道如何在用户返回时指定要使用的不同动画。

Jest我正在尝试为React使用Transitionfrom的组件编写单元测试react-transition-group。我需要模拟，Transition这样我的测试就不必等待动画完成。但是，除了“跳过”动画之外，我还需要在我的模拟组件onExited上触发回调。Transition

这是我的Component.js使用方式Transition：

...
return (
  <Transition
    timeout={1500}
    in={this.state.show}
    onExited={handleExited}>
    {status =>
      <button onClick={this.setState({show: false}) className={`component-${status}`}>button</button>
    }
  </Transition>
)

这是我的Component.test.js：

import React from 'react'
import {render, fireEvent} from 'react-testing-library'

import Component from '../Component'

test('check', () => {
  const handleCompletion = jest.fn()
  const {getByText} = render(
    <Component
      onButtonClick={handleCompletion}
    />
  )
  const button = getByText('button')
  fireEvent.click(button)
  expect(handleCompletion).toHaveBeenCalledTimes(1)
})

这个想法是，一旦button单击 a，组件就会产生动画，然后在完成后触发回调。

如何Transition正确模拟，以便它跳过动画但仍然触发 …

目标

我目前正在尝试使用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
    });
  };

在过去的几天里，我一直在尝试不同的 React 动画库，试图找到一种在视图（而不是路由）之间转换的解决方案，其中视图将是包装其他组件的组件等等。

到目前为止我尝试过：
react-transtition-group
react-animations
react-spring

仍然需要尝试 的react-motionTransition...

...还有更多的东西，但是所有这些，都做我需要的，除了一件事...当应用过渡/样式的每个状态时，子组件总是更新，触发重新渲染（顺便说一句，这是有道理的），除非子组件shouldComponentUpdate()返回 false，或者被包装在 PureComponent 内，这两者都不是解决方案，因为您可能（肯定）希望在过渡结束。

所有的示例都达到了它们的目的，但它们都使用功能组件或简单的字符串来进行演示，其中任何一个都不应该关心是否重新渲染，而是一个简单的修改，每次都会记录组件被渲染后，将显示它们在过渡期间渲染多次。

奇怪的是，似乎没有人关心或不知道。我发现关于此事的疑问或问题很少，尽管它非常真实，并且库对此的记录非常少。

请分享您的解决方案以避免此问题。

我有以下代码：

import React from "react";
import { BrowserRouter, Route, NavLink } from "react-router-dom";
import { AnimatePresence, motion } from "framer-motion";
import Hi from "./Hi";
import Something from "./Something";
import "./App.css";

const App = () => {
  return (
    <BrowserRouter>
      <AnimatePresence>
        <NavLink to="/">Hi</NavLink>
        <br />
        <NavLink to="/something">Something</NavLink>
        <hr />
        <Route path="/" exact={true} key="1">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 2 }}
            key="hi"
          >
            <Hi />
          </motion.div>
        </Route>
        <Route path="/something" exact={true} key="2">
          <motion.div …

我想知道 React 如何处理在组件动画期间调用的 Render。在下面的例子中，一个组件被重新渲染

假设在组件动画期间组件的状态发生了变化，因此组件被重新渲染。React 会取代物理 DOM 还是会识别组件处于动画中？这是我认为会发生的事情

第 1 步：组件挂载 组件首次挂载到物理 DOM。组件的动画持续 60 秒。该组件有一个更改状态计时器，它将在 30 秒内关闭。同时，react 会在挂载时保存虚拟 DOM。

第二步：触发状态变化，组件重新渲染 30秒后，父级发生状态变化，组件重新渲染。此时组件处于动画中期，并使用 react-transition-group，将“className-active”css 类应用于子项。React 现在将比较当前的虚拟 DOM 和旧的虚拟 DOM。虚拟 DOM 是不同的，因为孩子现在应用了活动类（而不是“输入”类）。结果，react 会将更新后的组件插入到物理 DOM 中（即使物理 DOM 不需要更新！）。因此，屏幕会闪烁...

这是描述上述场景的代码

import React from 'react'
import CSSTransition from 'react-transition-group'
                                                                                                                                                                                                                     ```
class ExampleComponent extends React.Component {
      constructor(props) {
           super(props);
           this.state = {reRender : false};
           setTimeout(() => {this.setState({reRender: true})}, 30000) 
           /* 30,000 ms is 30 seconds. 
              Set state will fire in 30 seconds, and the parent …

<TransitionGroup>我正在尝试使用附带<CSSTransition的来实现轮播react-transition-group。我正在使用CSS框架Tailwind CSS。但是，在使用 时<CSSTransition />，我们必须导入 css。

组件.js

<TransitionGroup>
    {itemArray.map((item, idx) => (
        <CSSTransition
            timeout={350}
            classNames={direction}
            key={Math.random() + idx}>
            <div className="relative mt-8 max-w-full inline-flex">
              {item?.item}
            </div>
        </CSSTransition>
    ))}
</TransitionGroup>

样式.css

.right-enter{ /* style */ }
.left-enter { /* style */ }

有没有什么方法react-transition-group可以使用 Tailwind CSS 处理过渡而不需要导入 css。

我尝试使用 来实现相同的<Transition>，但是如果类在生命周期（onEnter，onEntered）上更新，它将抛出too many re-renders错误。

我想用react-transition-group制作左右幻灯片。当我按“下一步”按钮时，它会出现在右侧（下一步），当我单击“后退”按钮时，我想它从左侧出现。我的代码总是从右侧获取它。我怎样才能实现这样的目标

.onboarding-screen
    display flex
    flex-direction column
    flex-grow 1
    position absolute
    width 100%
    height 100%
    align-items center
    &.step-enter
        transform translateX(100%)
        transition(all 1s)
    &.step-enter-active
        transform translateX(0%)
        transition(all 1s)
    &.step-enter-done
        position relative
    &.step-exit
        transform translateX(-100%)
        transition(all 1s)
    &.step-exit-active
        transform translateX(-100%)
        transition(all 1s)
    &.step-exit-done
        position relative