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

Question

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

0

Я пытаюсь сделать мои 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');
    }

TkNeo 03 нояб. 2015, в 18:52

Источник

Теги:

angularjs

ng-animate

3 ответа

Ещё вопросы

Shane · Answer 1 · 2015-11-03T17-15-00.000Z

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

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

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

большое спасибо. В соответствии с вашими предложениями я изменил код для анимации ng-hide, используя выражения, которые более элегантны, чем подход jquery, который я использовал ранее. plnkr.co/edit/QY1VQVqHPZZOOi9qyl6f?p=preview Можете ли вы помочь мне понять, почему нам пришлось изменить высоту на максимальную. Я пытался гуглить но не смог разобраться
@Tarun Я на самом деле не знаю истинного ответа на этот вопрос, за исключением того, что браузеры не поддерживают переход на высоту 0 или авто. Подумайте, это как-то связано с браузером, которому нужны фактические значения для вычисления промежуточных значений анимации.

Brad Rem · Answer 2 · 2015-11-03T14-50-00.000Z

Вместо всей логики контроллера, как насчет использования 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.

Вы можете помочь мне понять, почему мой код не работает? Я тоже хочу это понять.

Rebel · Answer 3 · 2015-11-03T14-47-00.000Z

Вам не нужно делать такой комплекс для этого. Я реализовал простой 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>

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

Вы можете помочь мне понять, почему мой код не работает? Я тоже хочу это понять. Спасибо, что поделились своим плункером
все, что я хочу сказать, это то, что ваш подход не очень хорош, даже если он может достичь того, что вы пытаетесь получить. манипулирование dom на основе идентификаторов, добавление / удаление классов с помощью jquery - не очень хороший подход, и когда вы можете добиться того же самого более чистым и более эффективным способом с помощью угловых методов.
похоже, что никто из нас не знает, почему мой код не работает. Я постараюсь выяснить это.