0
CSS переход с AngularJS анимировать служба не работает должным образом
var app = angular.module('myApp', ['ngAnimate']);
app.controller('myController', function($scope){
\t $scope.myImgClass = 'start-class';
});
app.animation('.fadeOut', function(){
\t return {
\t \t enter: function(element, parentElement, afterElement, doneCallback){},
\t \t leave: function(element, doneCallback){},
\t \t move: function(element, parentElement, afterElement, doneCallback){},
\t \t addClass: function(element, className, done){
\t \t \t jQuery(element).animate({ opacity: 0 }, 3000);
\t \t },
\t \t removeClass: function(element, className, done){
\t \t \t jQuery(element).animate({ opacity: 1 }, 3000);
\t \t }
\t };
});.shrink-add, .shrink-remove{
-webkit-transition:all ease 2.5s;
-moz-transition:all ease 2.5s;
-o-transition:all ease 2.5s;
transition:all ease 2.5s;
}
.shrink,
.shrink-add.shrink-add-active{
height: 100px;
}
.start-class,
.shrink-remove.shrink-remove-active{
height: 400px;
}<!doctype html>
<html ng-app="myApp">
<head>
<title>AngularJS $animate Service</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="/css/animate.css">
</head>
<body>
<div ng-controller="myController">
<h3>Image Animation</h3>
<input type="button" ng-click="myImgClass='shrink'" value="Small"/>
<input type="button" ng-click="myImgClass=''" value="Big"/>
<hr>
<img ng-class="myImgClass" src="http://vriz.net/vriz/nma/ch25/static/images/arch.jpg"/>
</div>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-animate.min.js"></script>
</body>
</html>[Вопрос]
CSS Переход для увеличения размера изображения работ, но не работает для уменьшения.
Кто-нибудь знает, как это исправить?
Кто-нибудь знает, как это исправить? Кто-нибудь знает, как это исправить? Кто-нибудь знает, как это исправить? Кто-нибудь знает, как это исправить? Кто-нибудь знает, как это исправить?