你可以使用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; 
     } 
    }; 
});