标签: reactcsstransitiongroup

我正在尝试用元素高度设置动画ReactCSSTransitionGroup,所以这就是我想要的动画效果:

http://jsfiddle.net/cherrry/hgk4Lme9/

问题是,我总是不知道该元素的高度,所以我试图破解scrollHeight,clientHeight期间或类似的东西componentDidMount,并尝试设置node.style.height或规则添加到样式表

http://jsfiddle.net/cherrry/dz8uod7u/

让动画看起来很好,但是当元素进入时,它会闪现一点,缩放动画看起来很奇怪

应该是因为询问node.scrollHeight导致渲染立即发生,所以无论如何都要获得相同的信息并在动画开始之前注入css规则？或者我应该考虑其他方式？

我对max-height解决方案不是很满意,因为当max-height不接近或小于时,结果动画速度将非常奇怪height,并且我的组件的高度确实变化很大.

我可以想象最终的解决方案可能有点混乱,但我认为将它变成一个Mixin将足以在任何地方重复使用它

我想在第一个组件淡出的两个组件之间设置动画,并在将下一个组件添加到DOM并淡入之前从DOM中删除.否则,新组件将添加到DOM并占用空间.旧组件被删除.你可以在这个小提琴中看到问题:

http://jsfiddle.net/phepyezx/4

// css snippet
.switch-enter {
    opacity: 0.01;
}
.switch-enter.switch-enter-active {
    opacity: 1.0;
}
.switch-leave {
    opacity: 1.0;
}
.switch-leave.switch-leave-active {
    opacity: 0;
}

// React snippet 
<ReactCSSTransitionGroup transitionName="switch">
    <div key={key} className={className}>{this.text()}</div>
</ReactCSSTransitionGroup>

一个不可接受的解决方案(对我来说)是在转换到新组件之前用css隐藏原始组件,如下所示:

http://jsfiddle.net/phepyezx/5

// Change to css
.switch-leave {
    visibility: hidden;
    height: 0px;
    width: 0px;
    opacity: 1.0;
}

有没有办法在原件移除之前"延迟"安装新组件的反应？我对速度或其他图书馆持开放态度.

谢谢

我有一个ReactCSSTransitionGroup我正在使用CSS模块(和react-router的动态路由,但我相信这是按预期工作).

<ReactCSSTransitionGroup
  component="div"
  transitionName={transitions}
  transitionAppear
  transitionAppearTimeout={1000}
  transitionEnterTimeout={2000}
  transitionLeaveTimeout={2000}
>
  {React.cloneElement(this.props.children, {
    key: location.pathname,
  })}
</ReactCSSTransitionGroup>

在appear与leave过渡完美地工作-但enter过渡不-他们只是立即出现,与以前的组件淡出新的组件已进入后.

CSS(使用CSS模块):

.enter {
  opacity: 0.01;
}

.enter.enterActive {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.leave.leaveActive {
  opacity: 0.01;
  transition: opacity 2000ms ease-in;
}

.appear {
  opacity: 0.1;
  transition: opacity 1000ms ease-out;
}

.appearActive {
  opacity: 1;
  transition: opacity 1000ms ease-out;
}

---编辑---

我发现它在儿童路线上按预期工作(我的应用程序中只有少数几个).包括子路由在内的所有路由都是动态加载的,所以我仍然不确定是什么原因导致它在这些情况下起作用而在其他情况下不起作用.

我使用Cordova制作移动应用程序.使用react-router@2.0.0+ ReactCSSTransitionGroup来实现"卡片组"动画.我有一个严格的路由树,没有圆形链接的可能性.

为了提高性能并保存以前路由组件的状态,我想保留它们的整个历史记录只能在pop-state或replace-state上卸载.

怎么做？

我正在关注Chang Wang的教程,使用HOC和ReactTransitionGroup(第1 部分第2部分)与Huan Ji的页面转换教程(Link)一起制作可重复使用的React过渡.

我面临的问题是,React.cloneElement似乎没有将更新的道具传递给其中一个孩子,而其他孩子正确地接收更新的道具.

首先,一些代码:

TransitionContainer.js

TransitionContainer是一个容器组件,类似于AppHuan Ji的教程.它为它的孩子注入一片状态.

这些孩子TransitionGroup都是HOC的一个实例Transition(代码进一步向下)

import React from 'react';
import TransitionGroup from 'react-addons-transition-group';
import {connect} from 'react-redux';
class TransitionContainer extends React.Component{
  render(){
    console.log(this.props.transitionState);
    console.log("transitionContainer");
    return(
      <div>
      <TransitionGroup>
      {
        React.Children.map(this.props.children,
         (child) => React.cloneElement(child,      //These children are all instances of the Transition HOC
           { key: child.props.route.path + "//" + child.type.displayName,
             dispatch: this.props.dispatch,
             transitionState: this.props.transitionState
           }
         )
        )
      }

      </TransitionGroup>
      </div>
    )
  } …

我一直在阅读React Animations(React CSS Transition Group)的官方文档,但是我有点不清楚超时值的用途 - 尤其是当我在CSS中设置转换时.值是延迟,动画的持续时间,还是在删除之前应用该类的时间长度？它们如何与我在CSS中设置的转换持续时间相关？

例如,如果我在组件进入/离开时有一个简单的淡入/淡出,我还会在CSS中设置不透明度和过渡持续时间.然后根据此值中传递的时间或我的CSS中设置的持续时间对组件进行动画处理吗？

以下是官方文档提供的示例:

我的反应组件

<ReactCSSTransitionGroup 
  transitionName="example" 
  transitionEnterTimeout={500} 
  transitionLeaveTimeout={300}
>
  {items}
</ReactCSSTransitionGroup>

我的.css文件

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

谢谢!

我让ReactCSSTransitionGroup正常工作(我认为),新安装的组件在其所有荣耀中都会消失.

问题是被替换的组件突然消失了,这对我来说是一个问题,因为最终我希望我的组件进出视口...

我似乎没有看到任何方式告诉离开组件如何优雅地消失.

我是否遗漏了某些内容或者ReactCSSTransitionGroup是否只能为传入的组件设置动画？

UPDATE

代码如下:

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, IndexRoute, hashHistory, Link } from "react-router";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";


class PageOne extends React.Component {
  render() {
    return (
      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
        <div>
          HI FROM PAGE ONE<br />
          <br />
          <Link to="two">Take me to Page Two</Link>
        </div>
      </ReactCSSTransitionGroup>
    );
  }
}
class PageTwo extends React.Component {
  render() {
    return (
      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
        <div>
          HELLO FROM …

我在CSSTransitionGroup元素出现在DOM中时,或者当它离开DOM时,我用它来动画.它运作良好.

现在 - 我想对这个组件进行单元测试.我正在创建一个临时DOM节点,我将它附加到<body>,我将我的组件渲染到它,然后我执行一些操作.因此,我希望子DOM节点消失.

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

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

我尝试过: 单元测试本身运行良好.我可以通过将参数传递给我的组件来摆脱动画,这将使它不被使用CSSTransitionGroup.所以 - 最糟糕的情况 - 我会做到这一点.但我正在寻找更好的解决方案.

我还可以断言"-enter"/" - enter-active"/" - leave"/" - leave-active"类存在于有问题的元素上.这看起来有点像hacky,因为我可以想象一个应用这些类的错误,但是元素将保留在DOM中.我宁愿不采用这种方法.

看起来 React-Virtualized 不支持开箱即用的动画，但是是否有可能（并且合理？）ReactCSSTransitionGroup用于实现转换？

就我而言，我想在虚拟化列表中的元素上执行移除动画（例如，淡入淡出不透明度或缩小高度）过渡。

我试图出现/消失通知,但transitionAppear不起作用.我向onBlur事件添加项目(通知弹出窗口).工作时的动画leave流畅,当时的动画appear突然出现transition.最近在React中,不要发誓:D

PS
如果我添加ReactCSSTransitionGroup的alert.js- appear作品,但leave-没有.

CodeSandbox: https
://codesandbox.io/s/l26j10613q(在我用过的CodeSandbox ReactCSSTransitionGroup上alert.js,所以appear有效,但是leave- 没有)

alert.js:

export default class Alert extends Component {
  render() {
    const { icon, text } = this.props;
    let classNames = "cards-wrapper-alert";
    return (
     <div className={classNames}>
       <Card zIndex="2">
         <Icon icon={icon} eClass="alert-message-icon"/>
         <Label text={text} fw="fw-medium" fs="fs-14" fc="c-dark"/>
       </Card>
     </div>
    );
  }
}

alert.css:

.alert-appear {
  max-height: 0;
  overflow: hidden; …