Я пытаюсь сделать мои div2 показать похожие на SlideUp-Нажмите кнопку для переключения здесь.
Мой код показывает, что он не работает. Кнопки "открыть второй 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');
}
Это потому, что вы пытаетесь перейти к height: 0
, чего вы не можете сделать.
Изменение height
до max-height
решает проблему с вашим кодом, как показано в обновленном plunkr: http://plnkr.co/edit/O4rT2bSsr3KnufQMYuhx?p=preview
Но, как говорили другие, вы не должны так поступать. Вы должны просто переключать классы с помощью Angular, а не .addClass
.
Вместо всей логики контроллера, как насчет использования ng-show непосредственно в качестве атрибута:
<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>
Для ng-кликов первым является пример переключения, а другой - false.
Вам не нужно делать такой комплекс для этого. Я реализовал простой css-переход и ng-класс.
Вы можете проверить этот плункер
Моя реализация 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>
Надеюсь, это сработает для вас.