CSS animation disappears after array is modified

Question

CSS animation disappears after array is modified

I created a React application that manipulates an array of letters by shifting and unshifting them. The transition animation is triggered when the user clicks on the next and back buttons. Although the array is modified correctly, the transition effect only works when clicking next. I suspect that this issue might be related to something fundamental rather than specific to React, although I have ensured that the key is unique to prevent re-rendering.

// here's where the problem lies.
clickLeftRightHandler = () => {

    const { list } = this.state;
    // Could redrawing occur due to using slice or shifting the array? Or is it related to CSS?
    const newList = [list[list.length-1], ...list.slice(0, -1)];

    this.setState({list : newList});

}

Link to Code: https://stackblitz.com/edit/react-7nsrjg

Any assistance would be greatly appreciated!

javascript css reactjs css-transitions

Answer 1

Answer №1

To achieve the desired result, you can make use of the unshift method:

clickLeftRightHandler = () => {

    const { list } = this.state;
    const newList = list.slice(0, -1);

    // Add the last item to the beginning of the new list
    newList.unshift(list[list.length-1]);   // <-- this line here 
    this.setState({list : newList});
}

Here's a working example for reference.

edit

If you're wondering why it works, one possible explanation is that adding an extra character at the end might affect the animation timing. You can try appending a space like this:

newList.unshift(list[list.length-1]+' ');

Check out this example to see the difference in action. It's quite intriguing!

Answer 2

To achieve the desired result, you can make use of the unshift method:

clickLeftRightHandler = () => {

    const { list } = this.state;
    const newList = list.slice(0, -1);

    // Add the last item to the beginning of the new list
    newList.unshift(list[list.length-1]);   // <-- this line here 
    this.setState({list : newList});
}

Here's a working example for reference.

edit

If you're wondering why it works, one possible explanation is that adding an extra character at the end might affect the animation timing. You can try appending a space like this:

newList.unshift(list[list.length-1]+' ');

Check out this example to see the difference in action. It's quite intriguing!

Answer 3

Answer №2

The reason behind the malfunctioning animation was uncovered to be linked to the key assigned to the Alphabet Component. To resolve this, an index state was introduced to ensure that the key would receive a fresh identity distinct from the previously used one.

It is worth mentioning that the revised demonstration by @yuvi also addresses the issue by introducing a new string for the key, ensuring its uniqueness.

Check out the latest example

Answer 4

The reason behind the malfunctioning animation was uncovered to be linked to the key assigned to the Alphabet Component. To resolve this, an index state was introduced to ensure that the key would receive a fresh identity distinct from the previously used one.

It is worth mentioning that the revised demonstration by @yuvi also addresses the issue by introducing a new string for the key, ensuring its uniqueness.

Check out the latest example

CSS animation disappears after array is modified

Answer №1

Answer №2

Similar questions

Learn how to cycle through three different texts that appear in the same spot using smooth transitions

Error: Your Discord bot is unable to send a message as it is empty. Please check Discord

HTML code for positioning an image after resizing

Unusual symbols in angular variable found within an HTML document

Searching by date in MongoDB using Node.js

I keep receiving a 400 error code indicating that the files are empty

Tips for generating a fixed-length array from multiple arrays with different lengths, focusing on selecting items from each array according to their significance

Challenges with mapping UVs in THREE.js Geometry

Developing a vue.js component library without the need for constant rebuilding after every edit

What is the point at which an ES module can import a CommonJS named export?

Encountering an unusual reactivity problem involving Firebase (Firestore) when using Vue.js and Vuefire

Close session when browser/tab is exited

Difficulty encountered while trying to link an abstract class with Redux state using redux-thunk

Exploring the relationship between React component inheritance and asynchronous requests

Issue: React child objects are not acceptable (detected: object containing keys {inputList}). To display a group of children, please utilize an array instead

Developing a production build of a React app on a high-end machine is taking an unexpectedly

Unusual CSS hierarchy observed post AJAX content load

AJAX request lacks the 'access-control-allow-origin' header

Developing a Navigation Bar Layout with React Router for Pre and Post Login Scenarios

JavaScript shows undefined fields for results from Mongoose/MongoDB