ngAnimate в версии 1.3.10 не работает

Question

ngAnimate в версии 1.3.10 не работает

0

Я использую следующие инструкции: ngAnimate Angularjs Но что-то все еще не работает. Я не вижу никакого эффекта.

Вот мой код:

На странице у меня есть следующий скрипт (оба для версии 1.3.10 angularjs):

<script type="text/javascript" src="/Scripts/angular.min.js"></script>
<script type="text/javascript" src="/Scripts/angular-animate.min.js"></script>
<script type="text/javascript" src="/Scripts/Angular/app.js"></script>

Моим app.js является следующее:

(function (angular) { 
    var public_area =
        angular.module("public-area", ['ngResource', 'ngAnimate'])
        ...

Код анимации использования аспект страницы I:

<p ng-show="my_condition" class="scale-animation">...</p>

И, наконец, css

.scale-animation.enter, 
.scale-animation.leave { 
    -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position:relative; display:block;
} 

.scale-animation-enter,
.scale-animation-leave.scale-animation-leave-active { 
    -webkit-transform:scaleY(0);
    -moz-transform:scaleY(0);
    -ms-transform:scaleY(0);
    -o-transform: scaleY(0);
    transform:scaleY(0); height:0; opacity:0;
}

.scale-animation-leave,
.scale-animation-enter.scale-animation-enter-active {
    -webkit-transform:scaleY(1);
    -moz-transform:scaleY(1);
    -ms-transform:scaleY(1);
    -o-transform: scaleY(1);
    transform:scaleY(1); height:30px; opacity:1;
}

Параграф появляется и исчезает правильно, но анимация не отображается... Что для меня странно, так это то, что я аспектировал, чтобы увидеть классы, определенные в css в DOM (через Tools for development in chrome), когда условие проверено или нет.. но не классы...

Что не так?

Следуя простому PLUNKER:

https://plnkr.co/edit/atK7z5rWzDSEccB2HG0s?p=preview

спасибо

Ciccio 27 март 2016, в 13:29

Источник

Теги:

angularjs

css

ng-animate

2 ответа

1

Вам нужно, чтобы transition css был установлен в исходный класс элемента, а не в версии enter/leave

Так ngAnimate знает, нужно ли управлять анимацией элементов при рендеринге DOM.

Добавить правило

.scale-animation{
  transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}

И удалите переход из:

.scale-animation.enter, 
.scale-animation.leave{
   /* remove transition */
}

charlietfl 27 март 2016, в 12:08

Ещё вопросы

Ciccio · Accepted Answer · 2016-03-29T05-42-00.000Z

Я использовал неправильные классы css... Правильные классы для использования

/* SCALE */
.scale-animation.ng-enter, 
.scale-animation.ng-leave { 
    -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position:relative; display:block;
} 

.scale-animation.ng-enter,
.scale-animation.ng-leave.ng-leave-active { 
    -webkit-transform:scaleY(0);
    -moz-transform:scaleY(0);
    -ms-transform:scaleY(0);
    -o-transform: scaleY(0);
    transform:scaleY(0); 

    opacity:0;
}

.scale-animation.ng-leave,
.scale-animation.ng-enter.ng-enter-active {
    -webkit-transform:scaleY(1);
    -moz-transform:scaleY(1);
    -ms-transform:scaleY(1);
    -o-transform: scaleY(1);
    transform:scaleY(1); 

    opacity:1;
}

И я заменил

ng-show

с

ng-if