<!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 после клика.
Проблема решена, я должен использовать угловую анимацию 1.4.3, probebly в 1.4.4 есть изменения, которые я еще не вижу
Когда я использую это:
<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>
все работает правильно, проблема заключается в угловом распределении.
Вам не хватает.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;
}
showSpan не создается в контроллере.
(function() {
angular.module('MainApp', ['ngAnimate'])
.controller('MainController', function($scope) { /* dont forget to call $scope here */
$scope.showSpan = true; /* this must exists */
});
})();
Смотри !