Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Expand button with Animation on Hover using Vue.js ?
Animated websites give users an enjoyable experience. An animated element, such as a link or button, may change colour, expand or shrink, rotate, or any combination of those actions when a website visitor hovers over it. This serves as visual confirmation that their interactions are effective in addition to being eye candy.
Vue.js is a popular javascript framework for building interactive and visually appealing UI elements that can greatly enhance the user experience of your website or application. It provides a declarative and component−based programming approach that enables you to effectively create user interfaces, whether they are straightforward or intricate. It works on top of common HTML, CSS, and JavaScript.
Vue.js provides two attributes to check the animating behaviour “@mouseover” and “@mouseout” which triggers custom functions defined in vue.js by the user.
Approach−1: Using User defined Method to Toggle Classes
Here, we will utilise user defined methods to toggle classes for an HTML element to see hover animation effect.
Syntax
<button :class="<data-key>" @mouseover="<function()> @mouseout="<function()>
Here, <data−key> is a data member from vue.js application and <function()> are user defined methods in vue.js application.
Algorithm
Step 1 :Define button using HTML and CSS
Step 2 :Import Vue.js package from CDN.
Step 3 :In Vue object inside Script tag, define data and user defined methods, which in our case is “classes” array which holds all class names active for the button and “hoverover” and “hoverout” function that defines what to do when user hovers in and out of the button.
Step 4 :Define the toggle class CSS element i.e. animated class to get the UI changes upon hover.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorialspoint</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Tutorials Point hover button Animation</h1>
<button :class="classes" @mouseover="hoverOver" @mouseout="hoverOut">
Button
</button>
</div>
<style>
body {
background: #20262E;
padding: 100px;
font-family: Helvetica;
}
#app {
background-color: burlywood;
border-radius: 25px;
padding: 100px;
transition: all 0.2s;
}
button {
background-color: #9fb89f;
border: none;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
transition-duration: 500ms;
}
.animated{
background-color: blueviolet;
transform: scale(1.2);
border-radius: 25px;
}
</style>
<script>
new Vue({
el: "#app",
data: {
classes: []
},
methods: {
hoverOver: function () {
console.log('over');
this.classes = ['animated']
},
hoverOut: function () {
console.log('out');
this.classes = []
}
}
})
</script>
</body>
</html>
Approach−2: Toggle Class Based on Boolean Variable
We will bind a CSS class to HTML element using boolean variable that will return true when hovered else false.
Syntax
<button :class="{<classname>: <bool-var>}" @mouseover="<bool-var>= true" @mouseout="<bool-var>= false" > ... </button>
Here, :class contains classnames and a boolean variable which tells whether to incldue that class in tag or not. The boolean variable are triggered and controlled by “@mouseover” and “@mouseout” to change the value of boolean variable
Algorithm
Step 1 :Define button using HTML and CSS
Step 2 :Import Vue.js package from CDN.
Step 3 :In Vue object inside Script tag, define boolean data variable, which in our case is hover.
Step 4 :Bind the boolean variable with desired class which needs to be toggled upon hover in :class attribute.
Step 5 :Bind the boolean variable with desired class which needs to be toggled upon hover in :class attribute.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tutorialpoint button hover</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Tutorials Point hover button Animation</h1>
<button :class="{animated: hover}" @mouseover="hover = true" @mouseout="hover = false">
Button
</button>
</div>
<style>
body {
background: #20262E;
padding: 100px;
font-family: Helvetica;
}
#app {
background-color: burlywood;
border-radius: 25px;
padding: 100px;
transition: all 0.2s;
}
button {
background-color: #9fb89f;
border: none;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
transition-duration: 500ms;
}
.animated{
background-color: blueviolet;
transform: scale(1.2);
border-radius: 25px;
}
</style>
<script>
new Vue({
el: "#app",
data: {
hover: false
}
})
</script>
</body>
</html>
Conclusion
Animations enhance the user experience of website or application. Vue.js is a powerful tool for building user interfaces, and there are countless ways to customise and animate your UI elements. There are several additional methods to alter the behaviour and look of buttons and other UI components with Vue.js in addition to expanding and changing colour on hover.
228 Views
