div не отображается во время анимации с использованием nganimate

Question

Я пытаюсь сделать мой div2 похожим на кнопку SlideUp-Click to Toggle here.

My code показывает, что он не работает. Кнопки «открыть второй div» и «скрыть этот div» предназначены для отображения/скрытия второго div. Функция show/hide работает, но анимация не работает. Пожалуйста помоги.

var myElement = angular.element(document.querySelector('#div2')); 
    myElement.addClass('ng-hide'); 

    $scope.openSecondDiv = function() { 
     var myElement = angular.element(document.querySelector('#div2')); 
     myElement.removeClass('ng-hide'); 
    } 
    $scope.hideSecondDiv = function() { 
     var myElement = angular.element(document.querySelector('#div2')); 
     myElement.addClass('ng-hide'); 
    } 

Answer 1

Вместо того, чтобы все логики контроллера, что об использовании нг-шоу непосредственно в качестве атрибута:

<div class="row teal" id="div1"> 
    <button class="btn" ng-click="showDiv2 = !showDiv2">Open second div</button> 
</div> 

<div style="background: orange;" class="row cssSlideUp" ng-show='showDiv2'> 
    <button class="btn" ng-click="showDiv2 = false">Hide this div</button> 
</div> 

Для нг щелчков, первый пример переключая и других сил него к ложному.

Answer 2

Вам не нужно делать такой комплекс для этого. Я реализовал простой css-переход и ng-класс.

Вы можете проверить this plunker

Моей css реализации:

div { 
    white-space: pre; 
    background: #eee; 
    color: #333; 
    overflow:hidden; 
    height:0; 
    opacity:0; 
    transition:height 1s, opacity 1s; 
    -moz-transition:height 1s opacity 1s; 
    -webkit-transition:height 1s opacity 1s; 
    -o-transition:height 1s opacity 1s; 
    -ms-transition:height 1s opacity 1s; 
} 
.changed { 
    height:200px; 
    opacity: 1; 
} 

Моей html реализация

<button class="btn" ng-click="hideSecondDiv()">Hide this div</button> 
<div ng-class="{changed:clicked === true}" id="div2"> 

</div> 

Надеется, что это будет работать для вас.

Answer 3

Это потому, что вы пытаетесь перейти на height: 0, чего вы не можете сделать.

Изменение height к max-height решает эту проблему с вашим кодом, как видно в обновленном plunkr: http://plnkr.co/edit/O4rT2bSsr3KnufQMYuhx?p=preview

Но, как уже говорили другие, вы не должны делать это таким образом. Вы должны просто переключать классы с помощью Angular, а не .addClass.