0

I am using react-animated-css, for simple animation in react. I have a list which I am rendering in a <ul> tag. I am adding animation to the first element of the list.

This list is getting updated every 3 seconds. And new element is added at the first position in the array. The problem is, on load the animation is happening but not on update.

Here is full code : https://codesandbox.io/embed/ecstatic-cloud-qdpcj

I am not able to create a tag with 'react-animated-css' name as I am not eligible. It would be helpful if someone creates one for this.

BhaskerYadav
  • 569
  • 3
  • 24
  • I think this Animated tag uses a simple animation. If you want to manipulate an array you should use a transition. You can check some other libraries consisting transition for example react-spring or react-transition-group. – Peter Ambruzs Oct 11 '19 at 08:41
  • It creates a wrapper div around the element. Shouldn't these styles be applied when a new element is added.?? – BhaskerYadav Oct 11 '19 at 08:44
  • I do not know react-animated-css at all. I would not use it because it is not well known and it has little community. – Peter Ambruzs Oct 11 '19 at 08:48

2 Answers2

1

You must define a key property for every element in a map. If you do not define one the array index is the default key. So the first element with key 0 will be reused after each render and only the last one will be added. If you define a key, the redrawing will based on the key value, and the first one will be added.

    {items.map((d, i) => {
      if (i === 0) {
        return (
          <Animated
            key={d}
            animationIn="bounce"
            animationOut="flash"
            animationInDuration={1000}
            animationOutDuration={1000}
            isVisible={true}
          >
            <li>{d}</li>
          </Animated>
        );

Here is the example: https://codesandbox.io/s/pedantic-darkness-vgp3f

Peter Ambruzs
  • 7,763
  • 3
  • 30
  • 36
0
  • From my point of view "react-animated-css" this library is not getting re-rendered once the state gets updated.
  • I have tried it with simple css animation property "@keyframe" and is working fine and getting re-rendered when state changes.

Code-sandbox link :

https://codesandbox.io/s/suspicious-dijkstra-h1q7u

Prashant Adhikari
  • 53
  • 9
  • the problem with this demo is the non stop animation. The requirement is that the animation should take place only once. Also was looking to accomplish this using some library and not old CSS style. – BhaskerYadav Oct 11 '19 at 09:13
  • the last added data keeps on bouncing. So once the last element 'Rahane' is added observe that the element keeps on bouncing. But nevertheless thanks for helping. – BhaskerYadav Oct 11 '19 at 12:35
  • Okay got it. I think peter might have solved your problem. – Prashant Adhikari Oct 11 '19 at 12:44