javascript - 将 jQuery Hover 转换为 Angular

Question

我正在尝试将一段代码从 jQuery 转换为 Angular，由于我对此非常陌生，所以我不确定我是否做对了。

这是 jquery 代码:

$('ul.nav li.dropdown').hover(function(){
    $(this).find('.dropdown-menu').stop(true, true).delay(300).fadeIn();
}, function(){
    $(this).find('.dropdown-menu').stop(true, true).delay(300).fadeOut();
});

它所做的是当我将鼠标悬停在导航项上时，一个 div 淡入。

这是我尝试过的，但没有任何反应:

angular.module("headToggle", ["ngAnimate"]).animation(".management-settings", function(){
    return{
        enter: function(element, done){
            element.css("display", "none");
            element.fadeIn(200, done);
            return function(){
                element.stop();
            };
        },
        leave: function(element, done){
            element.fadeOut(200, done);
            return function(){
                element.stop();
            };
        }
    };
});

我做错了什么？我正在做的事情是否矫枉过正？

Answer 1

你不需要 Angular，你可以用纯 CSS 来完成:

.management-settings {
    opacity: 0;
    transition: opacity 200ms;
}

.management-settings:hover {
    opacity: 1;
}

关于转换的完整文档可以在这里找到:Using CSS transitions