Анимация углов не добавляет ng-hide-add и ng-hide-add-active

Question

Анимация углов не добавляет ng-hide-add и ng-hide-add-active

0

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/angular/angular.js" defer></script>
    <script src="node_modules/angular-animate/angular-animate.js" defer></script>
    <!-- Own script section -->
    <script src="app.js" defer></script>
    <!-- CSS section -->
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body ng-app="MainApp">
    <div ng-controller="MainController as mainCtrl">
        <span class="test" ng-init="showSpan=true" ng-click="showSpan=false" ng-show="showSpan">Test</span>
    </div>
</body>
</html>

App.js:

(function() {
    angular.module('MainApp', ['ngAnimate'])
        .controller('MainController', function() {

        });
})();

Стиль:

.test {
    font-size: 30px;
    font-weight: bold;
}
.test.ng-hide-add {
    opacity: 1;
}
.test.ng-hide-add-active {
    opacity: 0;
    transition: opacity 1s linear;
}

Угловой должен добавить к диапазону после щелчка ng-hide-add, а также ng-hide-add-active, но этого не произойдет. Зачем?? Я использую новейшие угловые и угловатые анимации. Угловая только добавить ng-hide после клика.

Artur Kasperek 18 авг. 2015, в 18:36

Источник

Теги:

javascript

angularjs

ng-animate

4 ответа

Ещё вопросы

Artur Kasperek · Answer 1 · 2015-08-18T18-58-00.000Z

Проблема решена, я должен использовать угловую анимацию 1.4.3, probebly в 1.4.4 есть изменения, которые я еще не вижу

Artur Kasperek · Answer 2 · 2015-08-18T17-07-00.000Z

Когда я использую это:

 <script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="[email protected]" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular-animate.js"></script>

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

Bharat · Answer 3 · 2015-08-18T15-50-00.000Z

Вам не хватает.ng-hide-add в завершении css (.test.ng-hide-add-active css).

http://plnkr.co/edit/dtyTHz30EiFV4PEjMWN8?p=preview

.test.ng-hide-add {
  opacity: 1;
}

/* The finishing CSS styles for the hide animation */
.test.ng-hide-add.ng-hide-add-active {
  transition: 1s linear all;
  opacity: 0;
}

Не могли бы Вы уточнить? Разве это не работает .. Вы ожидаете, что исчезнут правильно?
Когда я запускаю свое приложение с помощью веб-шторма на локальном узле, не добавляйте в класс span ng-hide-add, ng-hide-add-active. На плункере тот же пример работает нормально.

Bruno Gomes · Answer 4 · 2015-08-18T14-48-00.000Z

showSpan не создается в контроллере.

(function() {
    angular.module('MainApp', ['ngAnimate'])
        .controller('MainController', function($scope) { /* dont forget to call $scope here */
          $scope.showSpan = true; /* this must exists */
        });
})();

Смотри !

Я заметил, что тот же самый код, который я выкладываю, работает на плункере, но на моем компьютере, очень странно