项目的ReactCSSTransitionGroup呈现列表

Question

所以我试图在加载主页时显示一个带有ReactCSSTransitionGroup的过渡。它将显示巨型加速器下方的项目列表。这些商品来自Redux商店。它们是从一个名为home_index.js的容器组件传递过来的，该组件可以识别Redux Store。组件本身'poll-list.js‘包含轮询链接，即要转换的项；它(及其子组件)是一个哑组件。这意味着，它没有状态，也不知道redux存储。(这些组件甚至可以使用ReactCSSTransitionGroup吗？)

在任何情况下，我都不能，在我的一生中，让这种淡出在过渡中发挥作用。我知道我一定是在做一些wrong...but搞不懂的事情。

    const appearTransition = {
    transitionName: "fade",
    transitionLeave: false,
    transitionEnter: false,
    transitionAppear: true,
    transitionAppearTimeout: 2500
};

let polls;
if (props.pollsList) {
    polls = props.pollsList.map((poll, ind) => {
        return (
                <PollLink
                className='poll-link'
                title={poll.title} 
                index={ind}
                id={poll.id} 
                key={ind}
                />
        )
    });
}
return (
    <div className='poll-list'>
        <ReactCSSTransitionGroup {...appearTransition}>
        {props.pollsList.length > 0 ? polls : null}
        </ReactCSSTransitionGroup>
    </div>
)

}

这里是CSS (注意我不是在请假，我已经设置了显示为真，我只是想在主页的初始加载时发生)

    .fade-appear {
    opacity: 0.01;
    @include prefix(transition, (opacity 2500ms), webkit ms moz o);
    }
    .fade-appear.fade-appear-active {
    opacity: 1;
    }

此外，在这个元素中将ReactCSSTransitionGroup放在这个级别，会让我的flexbox变得很奇怪。组件不再是4列(或者根据屏幕宽度有多少)，它们位于中间的一列中……

我应该把过渡组放在哪里？

Hierarchy:

<HomeIndex>
    <Poll-List>
         <Poll-Links>

Answer 1

您可以简单地在css文件中添加此样式，尝试删除类名之间的连字符并将其设置为驼峰大小写：

.fadeAppear {
    opacity: 1;
    transition: opacity 0.3s ease-in;-webkit-transition: opacity 0.3s ease-in;
}

在redux代码中导入css文件，

@import mycss from '../path/style.css'

并在css中需要的地方添加给定的类。

作为：

return (
    <div className='poll-list'>
        <ReactCSSTransitionGroup className={mycss.fadeAppear} >
        {props.pollsList.length > 0 ? polls : null}
        </ReactCSSTransitionGroup>
    </div>
)

希望这能起作用！