代码之家 › 专栏 › 技术社区 › marcellorvalle

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

animate.css vue.js

marcellorvalle · 技术社区 · 6 年前

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

有什么优雅的方法(或Vue方法)可以解决这个问题吗?

这是我的密码:

<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/

1 回复 | 直到 6 年前

Jim B. 6 年前

整洁的看起来,当按钮在动画中更改大小时,鼠标会进入或退出悬停状态,因为边正在移动。

<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/