Poinformuj ngAnimate, aby animował tylko ngShow/ngHide

Question

Mam aplikację internetową AngularJS 1.2.2 z <div>, którą pokazuję/ukrywam na podstawie pewnej właściwości $scope. Korzystając z modułu ngAnimate, animuję pokazywanie i ukrywanie kamery <div>.

<div id="square" ng-show="showSquare" class="animate-shiny"></div> 

Mam też klasy I chcesz umieścić na tej <div> i do tego używam ngClass.

<div id="square" ng-show="showSquare" class="animate-shiny" ng-class="{ cool: extraCool }"></div> 

A tak się składa, że ​​czasami klasa zostanie zastosowane w tej samej chwili, gdy jako <div> jest pokazany/ukryte. Powoduje to, że animacja show/hide przestaje działać, podobno znajduje się ngClass bardziej interesująca do animacji, mimo że nie chcę używać tej animacji jako ngAnimate.

Here's a Plnkr that demonstrates the behavior. Kliknięcie przycisku pokaż/ukryj działa doskonale, klikając przycisk Utwórz fajne działa świetnie, ale przycisk, który łączy te dwa elementy, powoduje przerwanie animacji pokaz/ukryj.

Jak to naprawić? Czy mogę to zrobić bez ręcznego adresowania $animate?

Z góry dziękuję!

Answer 1

Problem polega na tym, że próbujesz animować używając klasy, a nie rozróżniać, kiedy rzeczy mają się animować. Oznacza to, że twój efekt przejścia odnosi się do klasy w ogólności, co ng-animate postrzega jako wymagające pracy, kiedy ta klasa jest przywoływana. I zmodyfikowane Twój css trochę dostać dość blisko, jeśli nie dokładnie, co chcesz:

#square { 
    width: 50px; 
    height: 50px; 
    background-color: blue; 
    transition: 0.4s all ease-out; 
} 

#square.cool { 
    box-shadow: 0 0 10px 3px green; 
    background-color: lightgreen; 
} 

#square.ng-hide-add, #square.ng-hide-remove 
{ 
    display: block !important; 
} 

#square.ng-hide-remove, #square.ng-hide-add.ng-hide-add-active{ 
    margin-left: -80px; 
    opacity: 0; 
} 

#square.ng-hide-remove.ng-hide-remove-active, #square.ng-hide-add{ 
    margin-left: 0; 
    opacity: 1; 
} 

Oto nowy plunkr więc można grać z nim: http://plnkr.co/edit/a7wiZfCrEGCXfIDSvF9r?p=preview

Jeśli chcesz tylko animować pokaż/ukryj i nie chcesz przejścia dla koloru, po prostu przenieś przejście do deklaracji #square.ng-hide-add, #square.ng-hide-remove.