你可以使用angularJs ng-hide制作div淡入和淡出吗？

Question

有没有办法让一个div淡入淡出使用AngularJs ng-hide？目前，我正在获取“菜单”以显示何时将鼠标悬停在标题div上。从头部移动到菜单本身时，我也得到了div。然而，我似乎找不到一种方法让它淡入淡出使用Angular或CSS。

继承人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

我把米奇的解决方案，并做了一些调整。请参阅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); 
}; 

}）;

基本上，我让它跟踪游标是否位于每个元素的内部，然后在决定是否切换显示变量之前放置一个.1秒的超时值。

Answer 2

在这里你去：http://jsfiddle.net/Lckf7kgm/4/ 您需要的NG-动画模块。

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