如何使用 Vue.js 在悬停时扩展带有动画的按钮？

在本文中，我们将使用 HTML 和 CSS 创建一个简单的按钮。之后我们将添加一些 vue.js 代码来制作鼠标悬停时的动画按钮。

为了首先制作按钮动画，我们创建了一个按钮。我们将在其上应用悬停。

HTML 按钮代码：

HTML

    

  

    

        
GeeksForGeeks Button Animation
        

        
            This is Button
        
    

输出：

为了使按钮更具吸引力，我们使用了一些 CSS 属性。

CSS

body {
  background: #20262E;
  padding: 100px;
  font-family: Helvetica;
}
  
#app {
  background: rgb(36, 196, 30);
  border-radius: 10px;
  padding: 100px;
  transition: all 0.2s;
}
  
li {
  margin: 8px 0;
}
  
h2 {
  font-weight: bold;
  margin-bottom: 15px;
}
  
del {
  color: rgba(0, 0, 0, 0.3);
}
  
button {
    background-color: #9fb89f; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
  }

应用 CSS 属性后的输出：

CSS之后

用于悬停缩放的 Vue.js 应用程序：创建了一个新的 vue.js 应用程序，它将动画放大到按钮类。

Javascript

new Vue({
  el: "#app",
  data: {
      classes: []
  },
  methods: {
      hoverOver: function() {
        console.log('over');
        this.classes = ['animated', 'zoomIn']
    },
    hoverOut: function() {
        console.log('out');
        this.classes = []
    },
    hoverOutTimeout: function() {
        setTimeout(() => { 
          console.log('out');
            this.classes = []
      }, 1000);
    },
  }
})

添加app后，通过node js运行vue.js的代码，鼠标悬停在按钮上，我们得到缩放(展开)效果。

输出：

悬停之后

扩大