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： 定义toggle class的CSS元素，即animated class，以实现悬停时的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： 将布尔变量与需要在:hover时切换的所需类绑定到:class属性中。

步骤5： 将布尔变量与需要在:hover时切换的所需类绑定到: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>