标签: react-transition-group

我从旧的迁移CSSTransitionGroup到新的react-transition-group CSSTransition和TransitionGroup。

我正在创建（破解）叠加层加载器，并且尝试在动画出现和消失时将动画应用于叠加层。

具体来说，当我将active=true道具传递给时，会将LoadingOverlayWrapper新CSSTransition的东西添加到TransitionGroup（该Fade组件）中，以包裹叠加层以显示。

当active=false随后CSSTransition从内取出TransitionGroup（直接孩子TransitionGroupIS null）。

这是代码的相关部分：

import React, {Children} from 'react'
import PropTypes from 'prop-types'
import {CSSTransition, TransitionGroup} from 'react-transition-group'
import LoadingOverlay from "./LoadingOverlay";
import styles from './Overlay.sass';


const FirstChild = props => Children.toArray(props.children)[0] || null;

const Fade = (props) => (
  <CSSTransition
    {...props}
    timeout={500}
    classNames={{
      appear: styles.appear,
      appearActive: styles.appearActive,
      enter: styles.enter,
      enterActive: styles.enterActive, …

我设置淡入淡出过渡的代码是最简单的：

import React from 'react';
import { Transition } from 'react-transition-group';
import PropTypes from 'prop-types';

const duration = 250;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out, color ${duration}ms ease-in-out`,
  opacity: 0,
}


const transitionStyles = {
  entering: { opacity: 0 },
  entered: { opacity: 1 },
  exiting: { opacity: 1 },
  exited: { opacity: 0 },
};


export default class Fade extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      in: false,
    };
  }

  componentDidMount() {
    this.setState({ in: true …

我当前的版本隐藏了每一行，但它发生得太快了，正如您 在我的 codepen 中看到的那样。通过删除顶部元素来重现。

我希望事件是这样展开的：

1. 消退
2. 向上滑动

我不确定如何使用 CSS 转换和 ReactTransitionGroup 来做到这一点

如果我能到达你看到元素消失的阶段，那么所有的东西都会聚集在一起，这将是一个很好的开始！

我的过渡材料：

const CustomerList = ({ onDelete, customers }) => {
  return (
    <div class="customer-list">
      <TransitionGroup>
        {customers.map((c, i) => 
          <CSSTransition
            key={i}
            classNames="customer"
            timeout={{ enter: 500, exit: 1200 }}
          >        
            <CustomerRow
              customer={c}
              onDelete={() => onDelete(i, c)}
            />
          </CSSTransition>
        )}  
      </TransitionGroup>
    </div>
  );
}

我的CSS：

.customer-enter {
  opacity: 0.01;
}

.customer-enter.customer-enter-active {
  opacity: 1;
  transition: 500ms;
}

.customer-exit {
  opacity: 1;
}

.customer-exit.customer-exit-active {
  opacity: 0.01;
  transition: …

更新：

对于那些面临同样问题的人：我在 ReactTransitionGroup 的 git 页面上发现了一个类似的问题，其中有解决方案：https : //github.com/reactjs/react-transition-group/issues/182。

老实说，90% 的解决方案让我印象深刻，我根本不明白，这是唯一对我有意义的部分（取自React TransitionGroup 和 React.cloneElement 不发送更新的道具这与 git 问题相关）：

传递道具给孩子？ 现在的问题是，为什么没有更新的道具被传递给离开元素？那么，它会如何获得道具呢？道具从父组件传递给子组件。如果您查看上面的示例 JSX，您可以看到离开元素处于分离状态。它没有父级，它只是被渲染，因为 将它存储在它的状态中。

我必须进一步研究和了解父组件和子组件的通信方式。我仍然是 Web 开发的新手，但事情正在慢慢开始变得有意义。

------------------

最初提出的问题：

当您尝试通过 React.cloneElement 将状态注入到您的子组件时，离开组件不是这些子组件之一。

我有一个包含导航菜单和嵌套在开关容器之间的路由的小应用程序。每次单击导航项时，我都会检查索引是更高还是更低以相应地设置动画状态（左或右），然后存储单击的导航项的新索引。

每次我切换路线时，应用的动画要么是淡入淡出，要么是淡入淡出。现在这一切正常，但唯一的问题是当类从左向右切换时，应用的 EXIT 动画使用给定的前一个类。

我理解为什么会发生这种情况，这是因为使用的退出类是最初设置的，当新类仅应用于第二次更改时，新的退出才会生效。转换文档非常有限，我找不到任何东西。

const { Component } = React;
const { TransitionGroup, CSSTransition } = ReactTransitionGroup;
const { HashRouter, Route, NavLink, Switch, withRouter } = ReactRouterDOM;

var icons = [
 {icon: 'far fa-address-book active', path: '/'},
 {icon: 'fab fa-linkedin', path: '/linked'},
 {icon: 'fas fa-gamepad', …

我只想在转换结束后运行一个进程。

这里的文档说：

添加结束监听器

添加自定义转换结束触发器。使用正在转换的 DOM 节点和完成回调进行调用。允许更细粒度的转换结束逻辑。注意：如果提供的话，超时仍可用作后备措施。

addEndListener={(node, done) => {
  // use the css transitionend event to mark the finish of a transition
  node.addEventListener('transitionend', done, false);
}}

Run Code Online (Sandbox Code Playgroud)

所以我这样使用它：

<Transition
  addEndListener={(node, done) => {node.addEventListener('transitionend', done, false);}}>
  <MyComponent />
</Transition>

问题是我不明白在转换结束后将函数放在哪里执行。

如果这是我的功能：

function abc() {
  // blah
  // blah
  //blah
}

我可以把它放在哪里？我应该把它放在 的位置done吗？

我正在使用带有React Transition Group的React Router在路线之间设置动画。使用<Redirect />组件时出现问题。该应用程序可以运行，但是我从React Router收到以下警告：

警告：您试图重定向到当前使用的相同路由：“ /”

您可以在此代码沙箱中看到它的发生。确保打开沙箱控制台，然后输入错误的路径（例如codesandbox.io/abc）。

我尝试遵循他们在文档中提供的示例（https://reacttraining.com/react-router/web/example/animated-transitions），但其中不包括重定向。有没有更好的方法来使用重定向和转换来避免警告？

我正在尝试使用一个SwitchTransition组件。不幸的是，文档中的代码不是一个完整的例子，我在填空时遇到了麻烦。有没有人有一个使用此组件的简单示例，例如 CSS 淡出然后淡入？

我在网上找不到任何例子。这是否意味着我忽略了另一种常见的方法？谢谢！

我正在使用TransitionGroup和CSSTransition（带有淡入淡出效果）对一系列项目的进入和退出进行动画处理。我希望这些项目在它们之间出现延迟，而不是同时出现。请注意，延迟可以低于动画的持续时间。

使用我当前的代码，所有项目都同时在淡入（如预期的那样）。在我的渲染函数中，我可以使用以下内容为组件的入口和出口设置动画：

<TransitionGroup>
    items.map((item,index) => ( 
        <CSSTransition
            key={item.id}
            timeout={1000}
            classNames="fade"
                <ItemPreview item={item} />
         </CSSTransition>
    ))
</TransitionGroup>

和CSS：

.fade-enter{
    opacity: 0;
    visibility: hidden;
    transition: all ease 1s;
}

.fade-enter.fade-enter-active{
    opacity: 1;
    visibility: visible;
    transition: all ease 1s;
}

.fade-exit {
    visibility: visible;
    opacity: 0;
}

.fade-exit.fade-exit-active{
    opacity: 0;
    visibility: hidden;
    transition: all ease 1s;
}

如何为每个商品添加不同的延迟？

https://www.wealthsimple.com/en-ca/culture/

如果您在内部页面上滚动任意距离并导航到另一个页面，它会快速跳转到页面顶部，然后进行页面转换。

我的过渡容器为 pos:ab。有什么想法为什么会发生这种情况吗？

我创建了一个包装组件，通过字符串提供类名列表，以支持 Tailwind 实用程序转换。这旨在嵌套在 TransitionGroup 组件中以支持多个项目的动画，如列表。

我能够很好地制作动画，但输入不起作用。你能帮我找出这段代码中的错误吗？

反应 16.13.1 反应过渡组 4.4.1

沙盒：https : //codesandbox.io/s/delicate-feather-ymozq

（登录那里观看 div 引用，以防类没有被应用，但它们似乎工作正常）

import React, { ReactNode } from "react";
import { Transition as ReactTransition } from "react-transition-group";

interface TransitionProps {
  in?: boolean;
  timeout: number;
  enter?: string;
  enterFrom?: string;
  enterTo?: string;
  leave?: string;
  leaveFrom?: string;
  leaveTo?: string;
  children: ReactNode;
}

export function CSSTransition(props: TransitionProps) {
  const { enter, enterFrom, enterTo, leave, leaveFrom, leaveTo } = props;
  const nodeRef = React.useRef<HTMLDivElement>(null);

  const enterClasses = splitClasses(enter);
  const enterFromClasses …