Question

我正在尝试在我的react应用中的div上实现动画效果，我在类名props中添加了两个类，但它们不起作用

<CSSTransition

            classNames={{
                enter:styles.newslist_wrapper,
                enterActive:styles.newslist_wrapper_enter
            }}
            timeout={500}
            key={i}
            >
                <div>
                    <div className={styles.newslist_item}>
                        <Link to={`/articles/${item.id}`}>
                        <h2>
                            {item.title}
                        </h2>
                        </Link>
                    </div>
                </div>
            </CSSTransition>

 <TransitionGroup
            component="div"
            className="list"
            >
             <div>
                {this.renderNews(this.props.type)}
                <div onClick={()=>this.loadMore()}>
                    load more
                </div>
            </div>
            </TransitionGroup>

这是我的CSS，我尝试将CSS添加到index.html文件中，但仍然无法正常工作

.newslist_wrapper {
    display: inline-block;
    box-sizing: border-box;
    opacity: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all .5s ease-in;
    transition: all .5s ease-in;

}

newslist_wrapper_enter {
    display: inline-block;
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%)
}

loadMore()函数已经在顶部定义了

使用过渡组时，React JS CSSTransition无法正常工作？

0 个答案: