ng-animate nefunguje v 1.3 - angularjs, ng-animate

Mám tú triedu ng-animate uplatňované na smernicu, ale nedostávam:

ng-hide-remove.ng-hide-remove-active alebo .ng-hide-remove.ng-hide-remove-active

Mám úhlové a uhlovo-animované 1,3 načítané. a vrátane ngAnimate v app.js

<div class="message animate-show {{message.type}}" ng-show="message">
{{message.text}}
</div>

Prechody sa neuskutočňujú:

.message.animate-show {
line-height:20px;
opacity:1;
padding:10px;

&.ng-hide-add.ng-hide-add-active,
&.ng-hide-remove.ng-hide-remove-active {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}

&.ng-hide {
line-height:0;
opacity:0;
padding:0 10px;
}
}

odpovede:

8 pre odpoveď č. 1

Pre jednoduchú animáciu, ako napríklad vyblednutie / vyblednutie, potrebujete nasledujúce triedy CSS:

.my-animation {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
opacity: 1;
}

.my-animation.ng-hide {
opacity: 0;
}

---

UPDATE:

Ak máte iný preklad na prvok, ktorý nechcete mať vplyv, použite nasledujúce definície CSS, aby ste použili iba prepisy na blednutie v / out:

.my-animation {
opacity: 1;
}

.my-animation.ng-hide {
opacity: 0;
}

.my-animation.ng-hide-add,
.my-animation.ng-hide-remove {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}

---

Pozri tiež toto krátke demo.

---

0 pre odpoveď č. 2

Odpoveď programu ExpertSystem je správna, ak však stále nemôžete získať animáciu na prácu v oblasti Angular, musíte sa uistiť, že modul ngAnimate je pridaný do vašej aplikácie:

Modul ngAnimate poskytuje podporu pre animácie založené na CSS (kľúčové snímky a prechody), ako aj animácie založené na jazyku JavaScript prostredníctvom hákov na spätné volanie.

Pozri zdroj: https://docs.angularjs.org/api/ngAnimate

Môžete to urobiť vo svojom kóde, ktorý definuje vašu aplikáciu AngularJS nasledovne:

var app = angular.module("myApp", ["ngAnimate"]);

---