0

所以我试图在加载主页时显示带有 ReactCSSTransitionGroup 的转换。它是在jumbotron下方显示项目列表。此商品来自 Redux 商店。它们是从一个知道 Redux Store 的名为 home_index.js 的容器组件传递的。组件本身 '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（注意我不是在休假，我已将 Appear 设置为 true，我只是希望这发生在主页的初始加载时）

    .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>
4

1 回答 1

2

您可以简单地在您的 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>
)

希望这有效！

于 2016-10-10T06:33:02.007 回答