您可以使用Angularjs ng-hide做出DIV淡入淡出和淡出吗?

Question

有没有办法使用angularjs ng-hide逐渐淡出和淡出？目前，我正在获得"菜单"以显示鼠标何时在标头div上进行鼠标。从标头移到菜单本身时，我也让Div留下来。但是，我似乎找不到一种使它使用Angular或CSS淡入和消失的方法。

HERES JSFIDDLE

html：

<div ng-app>
    <div ng-controller="showCrtl">
        <div class="top" ng-mouseover="menu()" ng-mouseout="menu()">Mouse over me</div>
        <div ng-hide="bottom" ng-mouseover="menu()" ng-mouseout="menu()" class="bottom"></div>
    </div>
</div>

JS：

function showCrtl($scope){
    $scope.bottom = true;
       $scope.menu = function() {
        if($scope.bottom) {
            $scope.bottom = false;
        }
        else {
            $scope.bottom = true;
        }
    };
}

Answer 1

在这里您要去：http：//jsfiddle.net/lckf7kgm/4/您需要NG-ANIMATE模块。

<div ng-app="myapp">
    <div ng-controller="showCrtl">
        <div class="top" ng-mouseover="menu()" ng-mouseout="menu()">Mouse over me</div>
        <div ng-hide="bottom" ng-mouseover="menu()" ng-mouseout="menu()" class="bottom"></div>
    </div>
</div>

html

.top {
    background-color: blue;
    width: 100%;
    height: 150px;
}
.bottom {
    background-color: red;
    width: 50%;
    margin-left: 25%;
    height: 300px;
}
.bottom {
    -webkit-transition: all 2s ease;
    /* Safari */
    transition: all 2s ease;
}
.bottom.ng-hide {
    opacity:0;
}

JS

angular.module("myapp", ["ngAnimate"])
 .controller("showCrtl", function ($scope) {
    $scope.bottom = true;
    $scope.menu = function () {
        if ($scope.bottom) {
            $scope.bottom = false;
        } else {
            $scope.bottom = true;
        }
    };
});

Answer 2

我采用了Mikey的解决方案并进行了一些调整。请参阅JSFIDDLE。

angular.module("myapp", ["ngAnimate"])
.controller("showCrtl", function ($scope, $timeout) {
$scope.bottom = true;
 var inside = {
     top: false,
     bottom: false
 };
$scope.enterMenu = function (element) {
    inside[element] = true; 
    if (inside.top === false || inside.bottom === false) {
        $scope.bottom = false;
    }
    printObjects('entering ' + element);
};
 $scope.exitMenu = function (element, e) {
    inside[element] = false; 
     $timeout(function() {
         if (inside.top === false && inside.bottom === false) {
             $scope.bottom = true;
         }
     }, 100);
     printObjects('exiting ' + element);
 };
 var printObjects = function (from) {
     console.log('from: ',from,'nshouldHide: ', $scope.bottom, 'ninside top: ', inside.top, 'ninside bottom: ', inside.bottom);
 };

}）;

基本上，我一直在跟踪光标是否在每个元素的内部，然后在决定是否切换显示变量之前放置了0.1秒的超时。