- [Instructor] Let's take a look at my solution
to this usability and animation challenge.
So here I've filtered just for the interns
and I just wanted to prove to you,
in case you didn't try it yourself that the reset button,
if we don't hook it up to view, doesn't work.
It does clear the values, but it doesn't update the data.
So we need to do a little more work here.
Here in my directory.js, I'll go down to this reset button.
What I need to do is add a method
that will fire when this is clicked.
I called my method reset filters.
It's defined down here.
I'm resetting all the search keys to their default values,
and then I'm just firing notify filter update.
I could also just fire the custom event myself,
but since I already have a helper function that does it,
I'm calling the helper function.
So let's switch back to the browser
and make sure that it works.
Refresh.
Filter for the interns.
Reset, and everybody comes back, great.
And for those transitions, down here in my transition group,
I specified an enter active class and a leave active class.
Animated is in both of them,
which hooks them up to animate.css,
and then I chose the zoom in and zoom out transitions.
I didn't have to do anything special
with the duration of the transitions,
because view keeps track of that for me.
So zoom in, zoom out, works very well.
So that's my solution to adding a reset button here
and changing the animations to use animate.css.
I hope you found this challenge interesting.