Нет анимации при использовании CSSTransition и группового перехода в Reactjs - PullRequest
Новая
       9

Нет анимации при использовании CSSTransition и группового перехода в Reactjs

0 голосов
/ 31 марта 2020

В REACTJS я работаю над созданием простого приложения, которое содержит переходы. Я импортировал CSSTransitions и Group Transition в свой файл, но когда я пытаюсь применить CSSTransition для некоторых моих новостей, но я не получаю анимацию. Как будто его даже не существует. Я вижу, что мои элементы обернуты внутри компонента, но я не могу их оживить.

Может кто-нибудь помочь мне выяснить, что я делаю неправильно? 

import React, { Component } from 'react';
import {CSSTransition, TransitionGroup} from 'react-transition-group';
import {Link} from 'react-router-dom';
import Axios from 'axios';
import {URL} from '../../../Config';
import styles from './NewsList.module.css';


export default class NewsList extends Component {
    state={
        items:[],
        start: this.props.start,
        end: this.props.start+this.props.amount,
        amount: this.props.amount
    }
    componentWillMount(){
        this.request(this.state.start,this.state.end)
    }
    request=(start,end)=>{
        Axios.get(`${URL}/articles?_start=${start}&_end=${end}`)
        .then(response=>{
            this.setState({
                items:[...this.state.items,...response.data]
            })
        })
    }
    loadMore=()=>{
        let end = this.state.end + this.state.amount
        this.request(this.state.end, end)
    }
    renderNews=(type)=>{
        let template= null;
        switch(type){
            case('Card'):
                template= this.state.items.map((item, i)=>(
                    <CSSTransition
                        classNames={{
                            enter: styles.newList_wrapper,
                            enterActive: styles.newList_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>
                    )
                );
                break;
            default:
                template = null;
        }
        return template;
    }
    render() {
        return (
            <div> 
                <TransitionGroup
                    component="div"
                    className="list"
                >
                    {this.renderNews(this.props.type)}
                </TransitionGroup> 
                <div onClick={this.loadMore}>
                                Load More
                </div> 
            </div>
        );
    }
}
.newslist_item{
    border: 1px solid #f2f2f2;
    background: #ffffff;
    margin-top: 0px;
    padding: 8px 5px 0 5px;
}

.newslist_item h2{
    font-size: 13px;
    line-height: 21px;
    margin: 5px 0;
    color: #525252
}
.newslist_item a {
    text-decoration:none;
}
.newsList_wrapper{
    box-sizing: border-box;
    opacity: 0;
    transform: translateX(-100%);
    transition: all .5s ease-in;
}
.newsList_wrapper_enter{
    opacity: 1;
    transform: translateX(0%);

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

1 Ответ

0 голосов
/ 31 марта 2020 
classNames={{
                            enter: **styles.newsList_wrapper**,
                            enterActive: **styles.newsList_wrapper_enter**

Произошла опечатка с именами классов. S не хватает.

...