No animation when using CSSTransition and Group Transition in Reactjs

Question

In REACTJS, I am working with creating a simple App that contains Transitions. I have imported CSSTransitions and Group Transition in my file but when I am trying to apply CSSTransition for some of my news item but I am not getting the animation. It is as if it doesn't even exist. I can see that my items are wrapped inside the component, but I cannot get them to animate.

Could someone please help me figure out what I'm doing wrong?

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>

Does your element have both classes `.newsList_wrapper` and `.newsList_wrapper_enter` while it is entering (I don't speak react, I can't tell)? An educated guess is that you are replacing the former with the latter, that's why it loses the assigned transition property and does not animate. — Swimmer F, Mar 31 '20 at 07:53
Your class names are like **newsList** but you are accessing **newList**.. in classNames . Please check.. — Shilpa, Mar 31 '20 at 07:57
@SwimmerF CSSTransition has two classnames. one for when the component enters (before animation) and the other is enterActive (After animation) — Waseem Abdullahi, Mar 31 '20 at 07:59

score 0 · Answer 1 · answered Mar 31 '20 at 08:02

0

classNames={{
                            enter: **styles.newsList_wrapper**,
                            enterActive: **styles.newsList_wrapper_enter**

There was a typo with the classnames. An S was missing.

answered Mar 31 '20 at 08:02

Waseem Abdullahi

123
3
11

No animation when using CSSTransition and Group Transition in Reactjs

1 Answers1