Problem Statement - Why Animation?
Website UI Development is not about making things beautiful. It’s all about website performance and customer experience. According to studies from Amazon and Walmart, they discovered a drop of conversion rate/revenue on increasing the user interaction time as the user feels interrupted during the interaction. Another study discovered that a customised animated loader made a higher wait time and lower abandon rate compared to generic one as the user felt more interactive with the former loader.
In a nutshell, the animation of your application should be more interactive and engaging for the user, kind of like a cinema booking application and a form inside a location tag for example.
What is VueJS?
- A virtual DOM
- Declarative Rendering
- Computed properties
- Reactive components
- Conditional rendering … to name a few
Some of these features are quite similar to what Angular and ReactJS already provide. However, you can check its comparison with other frameworks.
Todo List Example
Let’s take a simple example of Todo list, containing a list of tasks with the functionality of adding/removing a task to/from the list.
This will be our view in HTML file, assuming that you’ve included VueJS in a
script tag already.
Meanwhile, our JS file looks like this.
The code itself is self-explanatory. It simply adds a
task inside the
addTaskToList method and removes from the list using
The event binding and loops syntax in the HTML looks similar to what you see in AngularJS. However, the syntax of variables and methods is different in VueJS, which reminds you of private variables and public methods you used to code in C++. You can view the demo.
Let’s add more interaction in this. A confirmation pop-up should appear with
Cancel options. Regardless of the option chosen, the pop-up should be closed later on.
In HTML, let’s modify the list element
And add a new pop-up element
Meanwhile in JS, initialize new data variables inside
And also, add some methods
Let’s add some animation into it.
For the fading-in/out the pop-up, you need to wrap our pop-up inside
This element takes care of the transition logic. You don’t need to bother when to start or stop transition. All you’ve to mention is what kind of transition you want to see and for how long. This can be done using some CSS classes provided by VueJS.
fade prefix used in this class should match the
name attribute of the
For blurring the form and the list elements once the pop-up appears, they should be wrapped inside a contained conditionally bounded using
And add the required CSS
You can check the complete code and view demo.