title: Animating a Vue component using mouseover and mouseout
body: <p>I am trying to create a Vue component that bounces when the mouse cursor hover over it. I am using the animate.css library and changing the component class with @mouseover then resetting it on @mouseout.</p>
  
  <p>It is almost ok. The only issue occurs when the user stops the cursor near the border. Due to the animation behavior, the mouseover/mouseout events will be called repeatedly, causing the component to flick. I could minimize it using a timeout before resetting the class but the behavior is still uncertain sometimes.</p>
  
  <p>Is there any elegant way (or Vue way) to solve it?</p>
  
  <p>Here is my code:</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;head&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;
    &lt;h1&gt;Hover the mouse near the border&lt;/h1&gt;
    &lt;hr&gt;
      &lt;button :class="classes"
        @mouseover="hoverOver"
        @mouseout="hoverOut"
      &gt;
        IMMEDIATE
      &lt;/button&gt;
      &lt;br&gt;&lt;br&gt;&lt;br&gt;
      &lt;button :class="classes"
        @mouseover="hoverOver"
        @mouseout="hoverOutTimeout"
      &gt;
        WAIT JUST A BIT
      &lt;/button&gt;
    &lt;/div&gt;  
  &lt;/body&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>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(() =&gt; { 
          console.log('out');
              this.classes = []
        }, 1000);
      },
    }
  })
  </code></pre>
  
  <p><a href="https://jsfiddle.net/marcellorvalle/eywraw8t/477611/" rel="nofollow noreferrer">https://jsfiddle.net/marcellorvalle/eywraw8t/477611/</a></p>