From the course: Vue.js 2 for Web Designers

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Challenge: Better usability and animation

Challenge: Better usability and animation - Vue.js Tutorial

From the course: Vue.js 2 for Web Designers

Start my 1-month free trial

Challenge: Better usability and animation

(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…

Contents