Можете ли вы сделать постепенное появление и исчезновение div с помощью angularJs ng-hide?

Есть ли способ заставить 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;
        }
    };
}

javascript css angularjs fade ng-hide
person Landon Call    schedule 12.05.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я взял решение Майки и внес некоторые изменения. См. 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 секунды, прежде чем решить, переключать ли отображаемую переменную.

person Maninacan    schedule 12.05.2015
comment
Этот намного более плавный, и он не сбрасывается с моими ссылками, которые находятся внутри нижнего div. : D - person Landon Call; 13.05.2015

arrow_upward
2
arrow_downward

Вот и все: 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;
        }
    };
});
person Michelangelo    schedule 12.05.2015
comment
Намного ближе, чем я сам! Есть ли способ сделать так, чтобы анимация не сбрасывалась при переходе от синего поля к красному? - person Landon Call; 13.05.2015
comment
Что ж, это довольно сложно в вашей текущей настройке, поскольку вы запускаете одну и ту же функцию для обоих div, но вы можете пойти на что-то вроде этого jsfiddle.net/2jRC8. Это решение позволит вам определить, где находится позиция мыши, а с помощью дополнительного оператора if вы можете предотвратить сброс анимации. - person Michelangelo; 13.05.2015
comment
Нашел обходной путь .... Помещение пустого div между двумя div. Как вы думаете? jsfiddle.net/Lckf7kgm/5 - person Landon Call; 13.05.2015
comment
Почему нет. Это не самое элегантное решение, но оно работает, и вот что важно. - person Michelangelo; 13.05.2015
comment
Неперехваченная ошибка: [$ injector: unpr] Неизвестный поставщик: $$ qProvider ‹- $$ q‹ - $ animate ‹- $ compile Что мне нужно добавить в мой проект, чтобы он заработал? Я добавил CDN для angular-animate, а также добавил его в свой app.js var app = angular.module (Test, ['angular.filter', 'ngAnimate']); - person Landon Call; 13.05.2015
comment
Неважно, что у меня там была устаревшая версия Angular. Обновил это, и теперь он работает. : D Спасибо, Майки. - person Landon Call; 13.05.2015
comment
Это НАМНОГО сложно. :( У меня есть ссылки внутри меню (очевидно). И каждый раз, когда я перехожу от одной ссылки к другой, анимация сбрасывается ... Кто-нибудь знает, как лучше сделать это с помощью jQuery, Angular или CSS? - person Landon Call; 13.05.2015
comment
Может быть, лучше на самом деле рассказать нам, чего вы действительно пытаетесь достичь. У меня такое чувство, что для этого вам даже не нужен JS. - person Michelangelo; 13.05.2015