Question

所以我试图在加载主页时显示ReactCSSTransitionGroup的转换。它是显示在超大屏幕下面的项目列表。这些物品来自Redux商店。它们从名为home_index.js的容器组件传递，该组件知道Redux Store。组件本身'poll-list.js'包含poll-links，要转换的项目;它（和它的子）是一个DUMB组件。意思是，它没有状态也没有意识到redux存储。（这些组件甚至可以使用ReactCSSTransitionGroup吗？）

无论如何，在我的生活中，我无法在过渡到工作中逐渐消失。我知道我一定做错了什么......但是无法理解。

    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列（或者根据屏幕宽度而不是很多），它们位于中心的一列中......

我将过渡组HOC放在哪里？

Hierarchy:

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

Answer 1

您可以在css文件中添加此样式，尝试删除类名之间的连字符并将其设置为camelcasing：

.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中添加给定的类。

as：

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

希望这有效！

ReactCSSTransitionGroup呈现项目列表

1 个答案: