(cymbal noise effect)
- [Instructor] For this challenge we're going to enhance
the usability of our form and add a little more animation.
For usability we're going to add a working reset button.
A regular input type equals reset won't work here.
We need to write the code that will reset the search object
that's included in the data for our filter component.
For animation, we're going to use Animate.css
and hook it up to the transitions in our people list.
What you'll need to do is specify the correct enter
and leave class props from Animate.css
to get the animations to fire.
Animations are triggered with the animated class,
and then the name of whichever animation you like.
So you'll just find whichever one you want to use
and you think looks good, and add that in as well.
There's a little bit of setup that we're going to need to do,
and I also want to point you to the Animate.css website here.
This lets you experiment with the different animations
that are available, and if you go to view on GitHub here,
there's a lot of documentation here one how to use
Animate.css, which shows you how you can do things
like tune the duration of the transitions and so forth.
Over here on our code, I've included an Animate.css snippet
file, so you should copy and paste this into your index.html
file if you're following along with me up here, in the css.
Now that you have this snippet in here, you have access
to Animate.css for the purpose of this challenge.
This should take a few minutes, I'll see you soon.