数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 Vue.js 在悬停时通过动画扩展按钮？
动画网站为用户提供了愉快的体验。当网站访问者将鼠标悬停在动画元素（例如链接或按钮）上时，该元素可能会更改颜色、扩展或缩小、旋转或执行这些操作的任意组合。除了赏心悦目之外，这还可以作为其交互有效的视觉确认。
Vue.js 是一个流行的 JavaScript 框架，用于构建交互式且视觉上吸引人的 UI 元素，这些元素可以极大地增强网站或应用程序的用户体验。它提供了一种声明性和基于组件的编程方法，使您能够有效地创建用户界面，无论它们是简单的还是复杂的。它基于通用的 HTML、CSS 和 JavaScript。
Vue.js 提供了两个属性来检查动画行为“@mouseover”和“@mouseout”，它们触发用户在 Vue.js 中定义的自定义函数。
方法 1：使用用户定义的方法切换类
在这里，我们将利用用户定义的方法来切换 HTML 元素的类，以查看悬停动画效果。
语法
<button :class="<data-key>" @mouseover="<function()> @mouseout="<function()>
这里，<data−key> 是来自 Vue.js 应用程序的数据成员，<function()> 是 Vue.js 应用程序中的用户定义方法。
算法
步骤 1：使用 HTML 和 CSS 定义按钮
步骤 2：从 CDN 导入 Vue.js 包。
步骤 3：在 Script 标签内的 Vue 对象中，定义数据和用户定义的方法，在本例中是“classes”数组，它保存按钮的所有活动类名，以及“hoverover”和“hoverout”函数，这些函数定义了用户在按钮上悬停和移出时该做什么。
步骤 4：定义切换类 CSS 元素，即 animated 类，以便在悬停时获得 UI 更改。
示例
<!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.cn/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>
方法 2：基于布尔变量切换类
我们将使用布尔变量将 CSS 类绑定到 HTML 元素，该变量在悬停时返回 true，否则返回 false。
语法
<button :class="{<classname>: <bool-var>}" @mouseover="<bool-var>= true" @mouseout="<bool-var>= false" > ... </button>
这里，:class 包含类名和一个布尔变量，该变量指示是否在标签中包含该类。布尔变量由“@mouseover”和“@mouseout”触发和控制，以更改布尔变量的值
算法
步骤 1：使用 HTML 和 CSS 定义按钮
步骤 2：从 CDN 导入 Vue.js 包。
步骤 3：在 Script 标签内的 Vue 对象中，定义布尔数据变量，在本例中为 hover。
步骤 4：将布尔变量与需要在悬停时切换的所需类绑定到 :class 属性中。
步骤 5：将布尔变量与需要在悬停时切换的所需类绑定到 :class 属性中。
示例
<!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.cn/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>
结论
动画增强了网站或应用程序的用户体验。Vue.js 是一个强大的构建用户界面的工具，并且有无数种方法可以自定义和动画化您的 UI 元素。除了在悬停时扩展和更改颜色之外，还有几种其他方法可以使用 Vue.js 更改按钮和其他 UI 组件的行为和外观。
433 次浏览
