Question

所以我有一个组件，我正在处理mouseEnter和mouseLeave事件，以便组件可以在鼠标进入和离开时向下和向下滑动。

在没有Ember的情况下，我已经多次在jQuery中完成了这个，我不记得这件事发生过。基本上发生的是，它将执行每个mouseEnter和mouseLeave事件（将它们堆叠在彼此之上），因此如果用户意外地将鼠标移入组件并且鼠标离开然后返回到它，它将向下滑动，然后向上滑动，然后再次向下滑动。如果我快速进入和退出，它将向下，向上，向下，向上，向下，向上滑动。和我一样多次。

无法找到任何关于此的信息，因为似乎很难找到关于Ember模糊使用的任何内容。

这就是我在组件的JS文件中所拥有的：

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['template-select', 'windows-select-container'],

  mouseEnter: function() {
    let $options = $('.windows-select-container > .vault-custom-container')
    $options.slideDown();
  },

  mouseLeave: function() {
    let $options = $('.windows-select-container > .vault-custom-container')
    $options.slideUp();
  }
});

Answer 1

所以我最终使用了纯CSS方法，概述如下：

.windows-select-container {
    cursor: default !important;
}

.vault-custom-container {
    margin-top: 0px;
    height: 0px;
    overflow: hidden;
    -webkit-transition: 300ms ease-in-out;
    -moz-transition: 300ms ease-in-out;
    transition: 300ms ease-in-out;
    -webkit-transition-property: margin-top, height;
    -moz-transition-property: margin-top, height;
    transition-property: margin-top, height;
}

.windows-select-container:hover .vault-custom-container {
    margin-top: 25px !important;
    height: 44px !important;
}

如何阻止Ember鼠标事件处理程序滞后

1 个答案: