資料結構
網路
關係資料庫管理系統
作業系統
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/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/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 次瀏覽
