Question

我正在尝试映射状态并为每个元素添加一个过渡，以便在安装dom时显示元素。

有两个与此相关的组件：PricingPage和PricingCard。

PricingPage的代码如下：

＆＃13;

import React, {Component} from 'react';
import PricingCard from './PricingCard';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

class PricingPage extends Component {
    constructor(props) {
        super(props);

        this.state={
            pricingContent:[{title:'1Abstract Art Pricing', text:`Each piece of artwork is individually priced. I base this on how much work and effort I put into the picture, basically I'm just using my own criteria.`},{title:'2Abstract Art Pricing', text:`Each piece of artwork is individually priced. I base this on how much work and effort I put into the picture, basically I'm just using my own criteria.`},{title:'3Abstract Art Pricing', text:`Each piece of artwork is individually priced. I base this on how much work and effort I put into the picture, basically I'm just using my own criteria.`},{title:'4Abstract Art Pricing', text:`Each piece of artwork is individually priced. I base this on how much work and effort I put into the picture, basically I'm just using my own criteria.`},{title:'5Abstract Art Pricing', text:`Each piece of artwork is individually priced. I base this on how much work and effort I put into the picture, basically I'm just using my own criteria.`},{title:'6Abstract Art Pricing', text:`Each piece of artwork is individually priced. I base this on how much work and effort I put into the picture, basically I'm just using my own criteria.`}]
        }
    }
    render () {
        return (
            <div className='pricing-page-wrapper'>
                <div className='navbar-background'></div>
                <h1 className='pricing-title'>Pricing</h1>
                
                <ReactCSSTransitionGroup transitionName="pricing" transitionEnterTimeout={700} transitionLeaveTimeout={700}>
                    <div className='pricing-wrapper'>
                    {this.state.pricingContent.map((item,i) => {
                    return(
                            <PricingCard key={item.title} title={item.title} text={item.text} />
                        )
                    })}
                    </div>
                </ReactCSSTransitionGroup>
            </div>
        )
    }
}

export default PricingPage;

＆＃13;

.pricing-page-wrapper{
    min-height: 75vh;
    width:80%;
    margin: 0 auto;
    .pricing-title{
        color:#949494;
    } 
    .pricing-wrapper{
        opacity:1;

    }
    .pricing-enter {
        height: 0px;
        opacity: 0;
    }
    .pricing-enter.pricing-enter-active {
        height: 90px;
        opacity: 1;
        transition: 700ms;
    }
    .pricing-leave {
        opacity: 1;
        height: 90px;
    }
    .pricing-leave.pricing-leave-active {
        opacity: 0;
        height: 0;
        transition: 700ms;
    }
}

＆＃13;

PricingCard页面：

＆＃13;

import React, {Component} from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

class PricingCard extends Component {
    constructor(props){
        super(props);
    }
    render () {
        return (
            <div className='pricing-card'>
                <h3 className='pricing-card-title'>{this.props.title}</h3>
                <div className='pricing-card-text'>{this.props.text}</div>
            </div>
        )
    }
}

export default PricingCard;

＆＃13;

.pricing-card{
    border-radius: 15px;
    border: 1px solid #949494;
    padding: 20px;
    height:90px;
    margin: 10px 0 10px 0;
    .pricing-card-title{
        color:#949494;
    }
    .pricing-card-text{
        color:#949494;
    }
}

＆＃13;

我似乎无法弄清楚我做错了什么，任何帮助都会受到赞赏。

Answer 1

您必须对列表中的项使用一些唯一键，它的数组索引将不起作用。例如，您可以使用 item.title 。

您必须将所有元素组包装到单个 ReactCSSTransitionGroup 中，而不是每个元素。

ReactCSSTransitionGroup 将通过键跟踪它们，因此必须安装它并拥有组元素的所有唯一键。所以把它从PricingCard.render中取出来到PricePage.render。

 class PricingPage extends Component {
     render () {
         return (
             <div className='pricing-page-wrapper'>
                 <div className='navbar-background'></div>
                 <h1 className='pricing-title'>Pricing</h1>
                 <ReactCSSTransitionGroup transitionName="pricing" 
                 transitionEnterTimeout={700} transitionLeaveTimeout={700}>
                     {this.state.pricingContent.map((item,i) => {
                         return(
                             <PricingCard key={item.title}
                             title={item.title} text={item.text} />
                        )
                     })}
                 </ReactCSSTransitionGroup>
             </div>
            )
        }
    }

Answer 2

所以我添加了transitionAppear = {true}并在我的scss文件中使用了以下css选择器：

＆＃13;

.pricing-appear {
        opacity: 0.01;
      }
      
.pricing-appear.pricing-appear-active {
        opacity: 1;
        transition: opacity .5s ease-in;
      }

＆＃13;

问题在于我想要对组件的初始安装进行动画处理。

子组件中的ReactCSSTransitionGroup不起作用

2 个答案: