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

因此，我有一个组件处理mouseEnter和mouseLeave事件，以便组件随着鼠标进入并离开它而向下滑动。如何阻止Ember鼠标事件处理程序滞后

我已经在jQuery中做过很多次，没有安装Ember，我不记得这种情况。基本上会发生的是，它会执行每个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(); 
    } 
});

来源

2017-05-15 Rose Nation

你曾经通过闭合动作尝试过吗？这可能会提升你的表现。也可能有点反弹。考虑'ember-concurrency'。 – Lux

做slideDown动画的东西你可以使用[液火烬插件]（https://github.com/ember-animation/liquid-fire） – kumkanillam

我还没有尝试关闭操作。我在早些时候尝试了它，但没有将它作为一个组件，但它不起作用，但是这些东西让我感到困惑，因为它需要控制器中的路由器的操作，但是当我把它放在那里时它不起作用，找出原因。如果可能，请考虑使用纯CSS解决方案。看看我是否可以将高度从0px过渡到它的高度。父容器的高度设置为：auto，这也会使容器膨胀/收缩。 –

所以我结束了使用纯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; 
}

来源

2017-05-16 19:57:33

我可能会将'：hover'部分更改为直接子元素，而不是所有元素（空格）......但除此之外，这可以做我所需要的。除了“滞后”之外，它也出于某种原因在点上丢帧。不知道为什么。 –

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

回答

相关问题