标签: reactcsstransitiongroup

我正在使用React和Reflux构建一个应用程序,我正在尝试按特定顺序呈现项目列表.

这些项是按反向时间顺序呈现的自定义Post组件,因此最新的帖子位于列表的顶部.

我正在使用可汗学院的TimeoutTransitionGroup让列表项淡入淡出.

我看到的问题是,当我添加一个新帖子并且组件通过新道具获取更新列表时,转换发生在列表中的最后一个元素而不是第一个元素上.我想拥有它,以便第一个元素淡入,因为这是添加的新项目的位置.

帖子2 < - 这篇文章是新增的

帖子1 < - 这篇文章淡入

有没有办法指定相同的项目顺序,但是以相反的顺序渲染它们,或类似的东西？

这是我组件的渲染功能:

    if (!(this.props.posts && this.props.ordering)) return false;
    var posts = this.props.ordering.map(function(postId, index) {
        return <Post key={index} post={this.props.posts[postId]}/>;
    }, this);
    return (
        <div className="post-collection">
            <TimeoutTransitionGroup 
                enterTimeout={500}
                leaveTimeout={500}  
                transitionName="postTransition">
                {posts}
            </TimeoutTransitionGroup>
        </div>
    );

这是CSS过渡:

.postTransition-enter {
    opacity: 0;
    transition: opacity .25s ease-in;
}

.postTransition-enter.postTransition-enter-active {
    opacity: 1;
}

.postTransition-leave {
    opacity: 1;
    transition: opacity .25s ease-in;
}

.postTransition-leave.postTransition-leave-active {
    opacity: 0;
}

任何帮助都感激不尽!

我想为所有在ReactCssTransitionsGroup中呈现但不知道如何去做的子项添加交错效果.我看了这个问题,但想尝试使用react过渡组.如果不可能,那么我将做与上述相关问题类似的事情.

我的过渡组件非常简单:

Transitions({component: 'div', transitionName: 'stagger'},
    [1, 2, 3, 4, 5].map(i =>
            div({className: 'pure-u-md-1-3 pure-u-lg-1-4 medium-box demo', key: i})
    )
)

是否可以指定一个项目的顺序ReactCSSTransitionGroup？

考虑一下他们的订单很重要的项目清单.如果要显示一个项目并通过一个操作隐藏其相邻项,请ReactCSSTransitionGroup混淆其顺序.看看下面的小提琴,这些项目应该是[1, 2, 3, 4, 5].

http://jsfiddle.net/mehranziadloo/kb3gN/15519/

是否可以告诉ReactCSSTransitionGroup(或ReactTransitionGroup)项目的顺序？

我是新手做出反应并尝试使用内联样式获取背景图像.但它不起作用.

显示错误"url未定义"

  render() {
    return (
        <div className="phase1" 
             style ={ { backgroundImage: url('https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300') } }>

            <input id="search" 
                   type="text" 
                   placeholder={this.state.search} 
                   onChange={this.updateSearch.bind(this)}/>
            &nbsp; &nbsp;&nbsp; &nbsp;

            <Link className="button1" to="Form"> + </Link>
        </div>
       )
    }
 }

我对React很陌生。我正在尝试通过实施完整的CRUD学习。但是，我无法从列表中删除课程的动画效果很好。

我已在transitionAppear和上配置了动画transitionLeave。该transitionAppear作品没有问题。我无法transitionLeave

这是我的组件：https : //github.com/leonardoanalista/react-crud/blob/master/src/components/course/CourseListRow.js

这是动画的CSS：https : //github.com/leonardoanalista/react-crud/blob/master/src/style.css#L66

请让我知道是否有更好的方法。

任何帮助将不胜感激！

欢呼莱昂纳多

我正在尝试为组件添加一些动画样式,并努力找出出错的地方.这是一个带有connect()和CSSTransitionGroup的简单组件(DOM中其他地方的不同组件最终将用于触发打开我的灯箱组件,Redux将用于在它们之间共享状态,以防您想知道为什么这是一个要求) :

LightboxPresentation.js:

import React, { Component } from 'react';
import { CSSTransitionGroup } from 'react-transition-group';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/actionCreators';

class LightboxPresentation extends Component {
    render() {
        return (
            <div>
            <CSSTransitionGroup
                transitionName="lightbox"
                transitionEnterTimeout={500}
                transitionLeaveTimeout={500}>
                {this.renderPage()}
                </CSSTransitionGroup>
                </div>
        )
    }
    renderPage() {
        return (
            <div key={'lightbox-module'}>Some test HTML</div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        showLightbox: state.showLightbox,
        itemsShowLightbox: state.itemsShowLightbox,
    };
};
const mapDispatchToProps …

我正在使用react-test-renderer 的渲染器对我的react 组件进行单元测试。它工作正常，但使用 ReactCssTransitionGroup 后，我收到以下错误“TypeError：无法读取未定义的属性'baseVal'”。不知道如何解决这个问题

我确认这个问题是由ReactCssTransitionGroup引起的

下面是我的组件文件：

import React from 'react';
import PropTypes from 'prop-types';
import {List, ListItem, Spinner} from '@stores/reactCommon';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

import BagListItem from './bag-list-item';

const BagList = ({bagList, loading}) => {
  const items = bagList.map((item, key) => (
    <ListItem key={key}>
      <BagListItem
        upc={item.upc}
        price={item.sellingPrice}
        description={item.description}
      />
    </ListItem>
  ));
  return (
    <div className="bag-list">
      {loading ? (
        <span className="bag-list__spinner">
          <Spinner size="extra-large" />
        </span>
      ) : null}
      <div className="bag-list__story-default-spacer">
        <List maxHeight="70vh">
          <ReactCSSTransitionGroup
            transitionName="bagList"
            transitionAppear={true}
            transitionAppearTimeout={500}
            transitionEnterTimeout={500}
            transitionLeaveTimeout={300}
          >
            {items} …

我想知道是否有人可以提供一些有关如何使用React.js实现动画组件/页面切换的见解.

我想要实现的是组件/页面转换,如http://www.semplicelabs.com/上的转换- 转换不透明度和margin-top的标题以及转换不透明度的内容.

当显示新的组件/页面时,当前显示的组件/页面应该在新的组件/页面转换之前转换出来.到目前为止LayoutComponent,我将页面组件呈现为CSSTransitionGroup:

import React from 'react/addons';

export default class LayoutComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { page: '' };
  },

  setPage(page) {
    this.setState({ page });
  }

  render() {
    return (
      <React.addons.CSSTransitionGroup transitionName='page'>
        {this.state.page}
      </React.addons.CSSTransitionGroup>
    );
  }
}

我还有两个页面组件,FirstPage和SecondPage.

import React from 'react';

export default class FirstPage extends React.Component {
  render() {
    return (
      <div>
        <header className='header'>
          <div className='container'>
            First Header
          </div>
        </header>
        <div …

场景是:我想根据用户是单击"下一个"还是"上一个",在不同方向为一系列类似谷歌的卡制作动画.

使用CSSTransitionGroup可以轻松实现一个方向的动画 - 我有"下一个"按钮触发当前卡片向上滑动并消失(下一张卡片从下方向上滑动).

但是,我还希望"上一个"按钮为相反的过渡设置动画,即当前卡片向下滑动(以及前一张卡片向下滑动).

问题的关键是CSSTransitionGroup应该保持挂载.我可以轻松地拥有类似的东西,<CSSTransitionGroup transitionName={this.state.isForward ? 'animate-forward' : 'animate-back'}并调用下一个/上一个按钮setState({isForward: ...}),但这似乎不起作用,可能是因为CSSTransitionGroup必须重新渲染.

我用CSSTransitionGroup描述的可能性是什么？

我正在使用反应过渡来淡入和淡出内容。

大多数情况下，这可以正常工作，但是我注意到一页可以立即呈现，而不会经历过渡状态。

我的活动：

  routeChange =(e) => {
    if(e.target.nodeName == "LI" || e.target.nodeName == "a") {
      return;
    }

    let path = "/detail/" + this.state.merchant.id;
    this.props.dispatch(push(path));
  }

还有我在该文件中的mapDispatchToProps

function mapDispatchToProps(dispatch) {
  let actions = bindActionCreators({ saveColor }, dispatch);
  return { ...actions, dispatch };
}

这是我的路径的工作方式：

<Route
  render={({ location }) => {
    const { pathname } = location;
    return (
      <TransitionGroup className="transition-group">
        <CSSTransition
          key={pathname}
          classNames="page"
          timeout={{
            enter: 1000,
            exit: 1000,
           }}
          >
          <Route
            location={location}
            render={() => (
              <Switch>
                <Route exact path="/login" component={LoginPage} /> …