标签: reactcsstransitiongroup

我试图动画一个包含从其他地方获取的数据的React组件.把它放在ReactCSSTransitionGroup工作正常.也就是说,直到我改变组件的render()方法返回,false直到获取数据为止(以防止它在没有数据的情况下呈现).

现在,我想组件是立即挂载的,此时添加了动画类,但之后只进行了渲染.这个想法是否正确？render返回实际组件时,如何让组件动画化？

我正在构建一个自动幻灯片,每5秒钟切换一次图像.当新图像进入时,我使用ReactCSSTransitionGroup创建淡入淡出方法.问题是当新图像淡入时,旧图像仍然存在并且两个图像都显示在屏幕上,旧图像将不会离开直到新图像完全显示出来.我该如何解决？

这是我的幻灯片组件来显示图像:

import React from 'react';    
const Slide = ({picture}) => {
  if(!picture){
    return <div>Loading...</div>;
  }    
  return (
      <div className='row'>
        <img src={picture.url} alt={picture.title} />
      </div>
  );
};    
export default Slide;

这是我称之为Slide组件的父组件的一部分

  <ReactCSSTransitionGroup {...transitionOptions}>
    <Slide key={this.props.active} picture={this.props.active}/>
  </ReactCSSTransitionGroup>

这是在父级的render()方法中设置转换选项

const transitionOptions = {
  transitionName: "fade",
  transitionEnterTimeout: 500,
  transitionLeaveTimeout: 500
}

这就是风格

.fade-enter{
  opacity: 0;
}
.fade-enter-active{
  opacity: 1;
  transition: 0.5s ease-in all;
}

基本上在父组件中,我有一个setInterval方法,每5秒更改一次活动图像.那么,当新的图像开始淡化它以便它不会改变我的页面时,如何使旧图像消失？谢谢

我一直试图弄清楚如何在滚动时触发react css过渡组.假设我有一堆组件,这个例子被渲染出屏幕:

// component.jsx

import React from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import './style.css'
export default class extends React.Component {
    constructor() {
    super()
    this.state = {
      title: ['an off screen title']}
    }
    render() {
    const displayText = this.state.title.map(i => <h1 key={i}>{i.title}</h1>)
      return (
        <ReactCSSTransitionGroup
            transitionName='atxt'
            transitionEnterTimeout={1000}
            transitionLeaveTimeout={1000}>
          {displayText}
        </ReactCSSTransitionGroup>
      )
    }
}

// style.css

.atxt-enter {
  opacity: 0.01;
}
.atxt-enter.atxt-enter-active {
  opacity: 1;
  transition: opacity 1000ms ease-in;
}
.atxt-leave {
  opacity: 1;
}
.atxt-leave.atxt-leave-active {
  opacity: 0.01;
  transition: opacity 1000ms …

我有两个反应元素，包裹在幻灯片中：

    <div className={classes.wrapper}>
      <Switch
        checked={checked}
        onChange={this.handleChange}
        aria-label="Collapse"
      />
      <Slide
        direction="left"
        style={{ transitionDelay: !checked ? "10000ms" : "0ms" }}
        in={checked}
        timeout={1000}
        mountOnEnter
        unmountOnExit
      >
        <Paper elevation={4} className={classes.paper}>
          <svg className={classes.svg}>
            <polygon
              points="0,100 50,00, 100,100"
              className={classes.polygon}
            />
          </svg>
        </Paper>
      </Slide>
      <Slide
        direction="left"
        style={{ transitionDelay: checked ? "10000ms" : "0ms" }}
        in={!checked}
        timeout={1000}
        mountOnEnter
        unmountOnExit
      >
        <Paper elevation={4} className={classes.paper}>
          <svg className={classes.svg}>
            <polygon
              points="0,100 50,00, 100,100"
              className={classes.polygon2}
            />
          </svg>
        </Paper>
      </Slide>
    </div>

完整代码见此处。

我试图让一个元素在另一个元素之前离开，以便它们交换，但似乎这是不可能的？我尝试了超时和转换延迟的各种组合，但我无法让其中一个在另一个到达之前离开。

我正在尝试在文本输入旁边显示通知,以通知用户他们的文本已保存,然后淡出该通知文本.

基本上,当提交相应的文本输入时,我正在尝试复制此操作.

$(this).fadeOut().next().fadeIn();

我想不出有什么方法可以淡化它,然后出来,这不是荒谬的回旋.

我也在使用Redux,并希望使用它,但这不是必需的.任何意见,将不胜感激.

再会！我编写这段代码是为了测试 React 过渡组库，但最终遇到了错误。脚本开始运行，我在页面上看到数据填充表单，但是当我单击提交按钮时，表单不会消失。错误参考描述： 失败的 prop 类型： 该 proptimeout在 中被标记为必需CSSTransition，但其值为undefined。在CSSTransition（在app.jsx：24）中在App（在index.js：7）中但是transitionAppearTimeot = {1500}！

import React, { Component } from 'react';
import CSSTransitionGroup from 'react-transition-group/CSSTransition';
import './app.css';
import Form from './components/Form';
class App extends Component {
constructor() {
    super();
    this.state = {
        mounted: true,
    };
    this.handleSubmit = this.handleSubmit.bind(this);
};
handleSubmit(event) { 
    event.preventDefault();
    this.setState = {
        mounted: false
    }
    console.log(this.state);
};

render() {
    return (
        <div className="app">
            <CSSTransitionGroup
                transitionName="fade"
                transitionAppear={true}
                transitionAppearTimeout={1500}
                transitionEnter={false}
                transitionLeave={true}
                transitionLeaveTimeout={300}>
                {this.state.mounted && <Form onSubmit= …

我正在尝试创建一个用于登录的模式，该模式在您单击登录按钮时淡入并在您关闭它时淡出。我决定使用“react-transition-group”库来实现它。淡入效果很好，但它会立即淡出，而没有应用动画。我怎样才能让它工作？

连接组件：

<div>
                <ModalRoot {...this.props}>
                    <Grid>
                        <Menu {...this.props}/>
                        <div className='wrapper'>
                            <div className='content'>
                                <Form postTodo={this.props.postTodo}/>
                                <ul className='todo-list'>
                                   <CSSTransitionGroup
                                    transitionName='todo'
                                    transitionEnterTimeout={500}
                                    transitionLeaveTimeout={300}>
                                        {todoItems}
                                    </CSSTransitionGroup>    
                                </ul>
                            </div>
                        </div>
                    </Grid>
                </ModalRoot> 
            </div>

模态根：

const MODAL_COMPONENTS = {
  LOGIN_MODAL: LoginModal,
  /* other modals */
};

const ModalRoot = (props: any) => {
    const {isVisible, isMaskShown, window} = props.modal;
    const Modal = MODAL_COMPONENTS[window];
    if(!isVisible) {
      return (
        <div>
          {props.children}
        </div>
      );
    }
    if(isMaskShown) {
      return (
        <CSSTransitionGroup
          transitionName='mask'
          transitionAppear={true}
          transitionAppearTimeout={500}
          transitionEnterTimeout={0}
          transitionLeaveTimeout={300}>
            <Mask>
              <Modal key={100} hideModal={props.hideModal} …

问题是我的表单有三种状态：默认，错误和成功。根据状态，将特定组件呈现到dom中。当此组件进入或离开时，我需要添加淡入动画。

我已经尝试过自定义CSS，GSAP（但不想将更多的软件包安装到我的项目中），现在尝试使用react-transition-group。

保持简单很简单，我创建了“错误”组件，如下所示：

export default class NewsletterFormError extends React.Component {
   componentWillMount() {
   }
   componentDidMount() {
   }
   render() {
      return (
        <div className="NewsletterFormError">
          I'm an error message
        <style jsx>{`
          .NewsletterFormError {
            font-size: 50px;
          }  
        `}</style>
        </div>
    )
  }
}

在索引页面上，我有：

    { this.state.formError &&
        <CSSTransitionGroup
        transitionName="test"
        transitionAppear={true}
        transitionAppearTimeout={200}            
        transitionEnter={true}
        transitionEnterTimeout={2000}
        transitionLeave={true}
        transitionLeaveTimeout={2000}>
          <NewsletterFormError />
        </CSSTransitionGroup>
      }

对于某些共振，当this.state.formErroris时true，组件将渲染并完成淡入，但是当状态变为时false，淡出将不起作用。

我正在尝试添加动画,以便在React.js应用程序(http://facebook.github.io/react/docs/animation.html)中输入我的列表.

但ReactCSSTransitionGroup抛出这样的例外:

Uncaught TypeError: Cannot read property '_mockedReactClassConstructor' of undefined

连同警告:

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components). warning.js:36

Warning: Only functions or strings can be mounted as React components.

我的组件看起来像:

var List = React.createClass({
  render: function () {
    var items = this.props.data
        .filter(function (item) {
            return item.stream;
        })
        .map(function (item) {
            return <div key={item.id}>item.name</div>;
        });

      return (
        <div className="list …

有人可以帮助我完成我正在尝试为全屏弹出窗口创建的向上/向下滑动过渡。我无法使用 CSSTransitionGroup 获得所需的上滑效果。代码示例可以在这里找到

任何帮助将非常感激。谢谢