Анимация на ngShow пропускается в первый раз

Я пытаюсь анимировать открытие/закрытие тела панели начальной загрузки Twitter, которое отображается с помощью ng-show в angular (версия 1.3.2), с помощью простого jQuery slideUp/slideDown.

(Сначала я пытался использовать переходы css, но не смог этого сделать из-за неизвестной высоты тела, а анимация максимальной высоты создавала проблемы при закрытии, поэтому я решил использовать JS)

Мне удалось создать анимацию, но она не работает при первом включении анимации. То есть первое тело показывается не анимировано, потом анимируется скрытие, а дальше все нормально (и шоу и скрытие анимируются).

Javascript-часть:

app.animation('.animate-panel-body-slide', function(){
return {
    addClass : function(element, className, done) {
        $(element).slideUp(400, done);
        return function(isCancelled) {
            if(isCancelled) {
                $(element).stop();
            }
        }
    },
    removeClass : function(element, className, done) {
        $(element).slideDown(400, done);
        return function(isCancelled) {
            if(isCancelled) {
                $(element).stop();
            }
        }
    }
}
});

HTML-часть:

<div class="panel panel-default">
    <div class="panel-heading">
        HEADING
    </div>
    <div class="panel-body animate-panel-body-slide" ng-show="isPanelOpen">
        SOME HTML IN BODY...
    </div>
</div>

Я что-то упускаю?


angularjs twitter-bootstrap ng-animate angularjs-ng-show
person YomY    schedule 23.11.2014    source источник
comment
Угловая версия 1.3.2. Я отредактировал вопрос, включив его для справки, и уже принял ваш ответ. Спасибо.   -  person YomY    schedule 24.11.2014

Ответы (1)


arrow_upward
3
arrow_downward

Когда removeClass выполняется, это происходит потому, что ng-hide (который устанавливает display: none) был удален из элемента.

В первый раз, когда это произойдет, элемент будет иметь display: block, что означает, что элемент появится немедленно, а анимация slideDown не будет видна.

Когда панель закрыта, анимация slideUp добавит к элементу style="display: none;", что означает, что при следующем открытии панель будет работать как положено.

Если вы добавите его вручную следующим образом:

<div class="panel-body animate-panel-body-slide" ng-show="isPanelOpen" style="display: none">

Это будет работать до тех пор, пока панель всегда начинается как закрытая.

Если вы хотите, чтобы он работал в обоих случаях, вы можете добавить это:

removeClass: function(element, className, done) {

  element.css('display', 'none');
  element.slideDown(400, done);

  ...
person tasseKATT    schedule 23.11.2014
comment
Спасибо tasseKATT за объяснение. Оба решения работали, и я решил реализовать решение JS. - person YomY; 24.11.2014