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 - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
Make a plan2m 26s
-
Scaffold initial components5m 18s
-
Pass component data with props6m 4s
-
Build the filters form5m 13s
-
Wire up the filters form4m
-
Respond to filter form updates3m 7s
-
Handle custom filter event3m 29s
-
Animating with transition-group6m 28s
-
Challenge: Better usability and animation1m 30s
-
Solution: Better usability and animation1m 39s
-
-
-