如何阻止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鼠標事件處理程序滯後

回答

相關問題