Disabling animations in Reactjs with CSSTransition and Group Transition

Currently, I am experimenting with REACTJS to build a basic app featuring Transitions. In my project file, I have imported CSSTransitions and Group Transition. However, when attempting to implement CSSTransition for specific news items, the animations are not appearing. It seems like they are non-existent despite being wrapped within the component. Can someone assist me in identifying where I might be going 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={window.history.pushState({},"","/newpage")}>
                                Click Here for More News
                </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>

Answer №1

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

Oops, a small mistake was made with the class names. A letter was missing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to implement the `omega/theme.css` file within the angular.json configuration

"styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css", "node_modules/primeicons/primeicons.css", ...

How can we bring in prop array values in React?

I've been working on developing a small music player program in React. Is there a way to import all these values together with a single import statement? I noticed that manually inputting the values into the props array doesn't work because the ...

A step-by-step guide on setting up a confirmation pop-up message using Gravity Forms

Has anyone attempted to implement a pop-up confirmation message in Gravity Forms? I am also looking to prevent the form from disappearing after submission. By the way, I have selected text as the confirmation type in my Gravity Form settings because I do ...

Vue in d3 - the property ownerDocument is not defined

I'm currently working on integrating d3 charts with Vue. I've noticed that using a ref seems to trigger an error, but is that the correct approach? <template> <div ref="chart"></div> </template> const char ...

Animated CSS sidemenu (utilized as a filtering panel for a table)

Hi there, I'm having some trouble with CSS Animation. I recently started developing websites and am using Bootstrap 4 along with Animate.css for animations. My goal is to have an icon button expand sideways to reveal a div containing select elements f ...

"Threads snap as soon as they begin to be put to use

Encountering an issue with the command yarn run serve, the error log states: $ vue-cli-service serve INFO Starting development server... 10% building 2/2 modules 0 activeevents.js:173 throw er; // Unhandled 'err ...

Combining two images using HTML and CSS resulted in conflicts when attempting to overlay any additional elements

I have managed to overlay two images successfully, but I am experiencing conflicts when trying to do the same with other div images. Here is the code on jsfiddle: https://jsfiddle.net/cLew1t2v/ and here is the code snippet: <div> <div style ...

Removing the loading spinner from Ag Grid

While utilizing ag-grid with rowModelType=serverSide, I have encountered an issue where the loading overlay includes a spinner as shown in the image below. My goal is to eliminate this spinner from the overlay. I attempted using hideOverlay(), but it seems ...

How is it that my initial response appears correct in the first log, but then suddenly changes to a 1?

I've encountered a strange issue where the response appears correctly in the initial log, but later changes to a '1' when console.log(data); is called. The screenshot illustrates the pattern: https://i.sstatic.net/zaXcg.png If you expand ...

When is the best time and place to break out Yahoo's Mojito Manhattan cocktail mix?

Yahoo! made headlines earlier this month by unveiling their new Mojito framework, set to be open sourced in 2012. I've been eager to learn more about this promising framework but haven't had any success so far. Does anyone know where I can find ...

Improvement in Select2 Change Event: Update the subsequent select2 box options based on the value change in the preceding select2 box

I need assistance with two select boxes, namely Category and Sub-category. My objective is to dynamically alter the available options in the subcategory box based upon the value selected in the category box. Additionally, I would like to load data for the ...

Dynamic status bar for WordPress using Advanced Custom Fields

I am currently working on developing an order tracking system using Wordpress, ACF, and a form plugin that is yet to be determined for the user interface. While the back-end functionality is working smoothly, my focus now shifts towards creating a visual ...

Altering the dimensions of a <div> based on the retrieved data

I am currently retrieving data from an API and displaying certain properties using mapping. I would like to adjust the width of the component based on the value of these properties. <h5> <span className="viewcount" ref={boxSize}> ...

Sending data from events to a textbox and a div

I've set an onClick event for a textbox. Is there a way to have the click event of a different div also execute when clicking on the textbox, even though they are not nested and in separate parts of the document? Any help with this in Javascript would ...

Searching for JSON data in JavaScript

Is there a more efficient approach for searching data in JSON other than using loops? This is specifically for editing and deleting purposes. for(var k in objJsonResp) { if (objJsonResp[k].txtId == id) { if (action == 'delete') { obj ...

What is the reason that Gatsby's arrow function is unable to access a value from props that is calculated from a promise?

Could someone shed light on why the key value is showing as undefined within the arrow function: // in parent component const Parent = () => { const [key, setKey] = useState<string>(); // this contains an expensive function we on ...

Issue with horizontal scrolling in ng-scrollbars occurs when scrolling from right to left

We are currently developing a single page application that supports two languages, one being right to left and the other left to right. For scrolling functionality, we have implemented ng-scrollbars, an Angularjs wrapper for the malihu-custom-scrollbar-pl ...

Discovering the meeting point where two dives converge

Is there a method to change the color of the overlapped common part of two animated circles? ...

Image tag src displaying a React icon causes a malfunction

I am currently following a guide on ReactJS and encountered an error when trying to use an Img tag as directed in the tutorial. <Img src={keepLogo} alt="Google keep logo" /> This resulted in the following error: Warning: Invalid value for ...

Issue with rendering Chip component in MUI within React upon initial click

Utilizing MUI Select for multi-select options and displaying the modified final values as MUI Chips. However, I encountered an issue where the chip does not show instantly when adding but appears upon rendering the page after modifying the name or suffix ...