3

有没有办法让 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;
        }
    };
}
4

2 回答 2

2

给你：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;
        }
    };
});
于 2015-05-12T22:20:40.067 回答
1

我采用了 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 秒超时。

于 2015-05-12T23:34:57.183 回答