使用 mouseover 和 mouseout 为 Vue 组件设置动画

Question

我正在尝试创建一个 Vue 组件，当鼠标光标悬停在它上面时会弹跳。我正在使用 animate.css 库并使用 @mouseover 更改组件 class 然后在 @mouseout 上重置它。

差不多好了。唯一的问题发生在用户将光标停在边界附近时。由于动画行为，mouseover/mouseout 事件将被重复调用，导致组件闪烁。我可以在重置 class 之前使用超时将其最小化，但有时行为仍然不确定。

有什么优雅的方式（或者Vue方式）可以解决吗？

这是我的代码：

Html:

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
<body>
  <div id="app">
  <h1>Hover the mouse near the border</h1>
  <hr>
    <button :class="classes"
      @mouseover="hoverOver"
      @mouseout="hoverOut"
    >
      IMMEDIATE
    </button>
    <br><br><br>
    <button :class="classes"
      @mouseover="hoverOver"
      @mouseout="hoverOutTimeout"
    >
      WAIT JUST A BIT
    </button>
  </div>  
</body>

Javascript:

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

https://jsfiddle.net/marcellorvalle/eywraw8t/477611/

Answer 1

整洁。看起来就像按钮在动画期间改变大小一样，鼠标进入和离开悬停状态，因为边缘在移动。

我在每个按钮周围添加了一个 div，并将悬停触发器附加到 div 而不是按钮：

<body>
    <div id="app">
        <h1>Hover the mouse near the border</h1>
        <hr>
        <div @mouseover="hoverOver" @mouseout="hoverOut">
            <button :class="classes">IMMEDIATE</button>
        </div>
        <br><br><br>
        <div @mouseover="hoverOver" @mouseout="hoverOutTimeout">
            <button :class="classes">WAIT JUST A BIT
        </button>
        </div>
    </div>
</body>

https://jsfiddle.net/jmbldwn/kbswLpto/5/

使用 mouseover 和 mouseout 为 Vue 组件设置动画

Animating a Vue component using mouseover and mouseout

animate.css

vue.js