Animating Elements

Adding animation to the “Make Favorite” button

The favorite elements start with a familiar pattern. We maintain a list of favorite concerts in the global state, and clicking the “Make Favorite” button adds that concert to the state while clicking “Remove Favorite” takes it out.

There are three complications:

• Both add and remove the need to make an async call to the server to register the change in the server-side database, which means that they need to be Redux thunks and that they need to pass through Rails authentication.

• We want only the newly added favorites to animate in, which means that we need to track which ones are new and add the Animate.css to them.

• We want removed favorites to animate out, which means that we can’t simply throw them out of the DOM. we need to make sure we animate and then hide them, so we need to track which elements have been removed on client-side.

Thanks to Michal Czaplinski for his blog post that we adapted to manage the animate-out effects.

The “Make Favorite” button is part of the ConcertDisplay component, which is mostly markup that we’re not showing here, but it does call a thunk for its dispatch.

Here are the make and remove favorite thunks, which are similar in structure, enough so to extract common code: