将jQuery Hover转换为Angular

Convert jQuery Hover to Angular

本文关键字：Angular 转换 Hover jQuery      更新时间：2023-09-26

我正在尝试将一段代码从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();
            };
        }
    };
});

我做错了什么?我做的是不是太过分了?

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

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

关于过渡的完整文档可以在这里找到:使用CSS过渡

我认为你需要在element.css()上链接一个动画，例如:

element.css({'opacity', '0'}).animate({'opacity', '1'}, 200, done);这也可以通过ng-mouseover来改变绑定到ng类的布尔变量，例如:<div class=".dropdown-menu" ng-mouseover="hovered = true" ng-class={'is-hovered': hovered}></div>

然后在你的css中:

`.dropdown-menu{
    transition: opacity 200ms linear;
    opacity: 0;
}
.dropdown-menu.is-hovered{
   opacity: 1;
}`

前面的答案是正确的，你可以使用angular的内置指令和纯css，而不必自己编写任何JS

Arg，我没有代表回复你对上一篇文章的评论，但你可以使用css属性transition-delay
相关文章：