Wie man Ember Mouse Event Handler davon abhält, verzögert zu werden

Question

So habe ich eine Komponente, die ich mouseEnter und mouseLeave Ereignisse für, damit die Komponente nach unten und oben gleiten kann, wie die Maus eintritt und es verlassen.

Ich habe dies in jQuery schon oft ohne Ember getan und ich kann mich nicht erinnern, dass das jemals passiert ist. Was passiert, ist, dass es jedes mouseEnter- und mouseLeave-Ereignis ausführt (übereinander gestapelt). Wenn also ein Benutzer versehentlich in die Komponente mausiert und die Maus verlässt und dann wieder hineingeht, wird sie nach unten rutschen und dann nach oben gleiten , dann wieder runter rutschen. Wenn ich schnell ein- und ausfahre, gleitet es nach unten, oben, unten, oben, unten, oben. so oft wie ich es getan habe.

Konnte nichts finden, da es anscheinend schwer ist, etwas über obskure Anwendungen von Ember zu finden.

Dies ist, was ich in der Komponente JS-Datei:

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

So landete ich einen reinen CSS-Ansatz nach oben, unten beschrieben:

.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; 
}