Question

有没有办法让一个div使用AngularJs ng-hide淡入淡出？目前我正在获取＆＃34;菜单＆＃34;当鼠标悬停在标题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

Here you go: http://jsfiddle.net/Lckf7kgm/4/ You need the ng-Animate module.

HTML

<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>

JS

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

Answer 2

I took Mikey 's solution and made some adjustments. See jsfiddle.

clockString

});

Basically, I made it keep track of whether the cursor is inside of each of the elements and then I put a .1 second timeout before deciding whether to toggle the display variable.

你能用angularJs ng-hide做一个淡入淡出和淡出的游戏吗？

2 个答案: