你能用angularJsng-hide做一个divfade-in和fade-out吗？

Question

有没有办法让 div 使用 AngularJs ng-hide 淡入淡出？目前，当我将鼠标悬停在 header div 上时，我会显示 "menu"。当从 header 移动到菜单本身时，我还保留了 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

给你：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);
 };

});

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

你能用angularJsng-hide做一个divfade-in和fade-out吗？

Can you make a div fade-in and fade-out using angularJs ng-hide?

javascript

css

fade

angularjs

ng-hide