Inform the User of Interactions with CSS Transitions
Animations and transitions, when used appropriately, can help inform users how they are interacting with an application and how the user interface is responding. This video takes a simple example of adding a transition to this React/Redux application using React's CSSTransitionGroup.
[00:01] Our application's looking pretty complete. We have some nice styling, we have some semantic HTML underneath, we added some responsive features for looking a little bit better on mobile, but really this thing needs some transitions. It needs some animation. When we add a new a to-do item, it would be nice if there was some affordance to show the user this new to-do that you just added. Where is it going.
[00:23] It's going to go to the bottom of the list, so a little animation going from the form, popping up to the bottom of the list, or at least some visual cue that that's happening. Also, when we hide and show them, it would be nice if they kind of collapsed, showing it's the same list, we're just losing some items in between as we're filtering it.
[00:37] These are things that we can do using CSS transitions. React actually has some features using a CSS transition group. This is not an exhaustive tutorial on the React CSS transition group. We're just going to do a quick example of how you could add some basic animation to an application. The majority of the work is actually being done by CSS.
[00:56] Here, we're going to replace our unordered list, which is our to-do list. We're going to replace the UL tag with the React CSSTransitionGroup tag. We're going to keep our class name. We're going to add the transition name, so that we can target it with a CSS selector. Then we're going to add our transition enter timeout and our leave timeout. We're going to change the closing tag, as well.
[01:19] Then we're going to go ahead and we need to bring in the CSSTransitionGroup from the react.addons. We also need to go into the HTML and make sure that we are actually using the library that has the CSSTransitionGroup in it.
[01:40] Now we can go ahead and add the styles to add the transition CSS. We're going to start by doing our to-do transition enter, and that's the just the key word used by the CSSTransitionGroup. We're going to set the height to zero, so when a new to-do is added, we start with a height of zero, then the to-do transition enter.todo transition active. These are two different classes. Again, this is just the naming convention used by the CSSTransitionGroup.
[02:07] We're going to set the final height to be 80 pixels. The to-do's of a height of 80 pixels. We're going to set the transition to animate height. We're going to do 70 milliseconds, and we're going to do ease-in for our easing function.
[02:22] We're going to do pretty much the same thing in reverse for the to-do transition leave. That's the transition for when an item is leaving the list. We're going to have a height of 80 pixels, and then we're going to do the same to-do transition leave, to-do transition leave active for a height of zero. And, the same thing, just transition height 70 milliseconds, ease-in.
[02:49] Let's go ahead and test it out. We can see here, as we change through the filters, that it's adding items, removing items, so the height's going from 80 pixels to zero, and from zero to 80, when they're coming back. You can see that the animation's very quick. I do that intentionally. I personally think that animations should be subtle or just a small part of an interaction. I think it adds just enough for it to be slightly nicer for the user to use.
[03:25] Hopefully, that gives you a taste to maybe go investigate transitions a little bit more. CSS transitions have a lot of power, if used correctly.
Garth Braithwaite, thanks for these videos. I just view all the lessons, it is great and organized very well. Could you advice some css open source repos to read, or to practice? Thanks!