Question

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

几乎可以。唯一的问题发生在用户将光标停在边框附近时。由于动画的行为，mouseover / mouseout事件将被重复调用，从而导致组件滑动。我可以在重置类之前使用超时将其最小化，但有时行为仍不确定。

有什么优雅的方法（或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组件进行动画处理

1 个答案: