javascript - 您可以使用 angularJs ng-hide 使 div 淡入淡出吗？

Question

有没有办法使用 AngularJs ng-hide 使 div 淡入淡出？目前，当我将鼠标悬停在标题 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

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