vue-transitions

Tasks

The final objective is to bring to life the boring search-box component. We are going to add a few transitions and animations to make it more enjoyable to use.

We can use these materials as reference:

Suggestion hover transition

Add a simple transition when you hover each one of the suggestions. You can just set a grey background for example.

Scale up search-box transition

Make the search-box scale up a bit when it is focused.

Collapse/expand the suggestions wrapper

Create a transition for the suggestions' wrapper that animates the height from 0 to auto.

Animate the appearance of each one of the suggestions

Create a transition that animates the appearance of the suggestions.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.