Question

＆＃13;

var app = angular.module('myApp', ['ngAnimate']);
app.controller('myController', function($scope){
	$scope.myImgClass = 'start-class';
});
app.animation('.fadeOut', function(){
	return {
		enter: function(element, parentElement, afterElement, doneCallback){},
		leave: function(element, doneCallback){},
		move: function(element, parentElement, afterElement, doneCallback){},
		addClass: function(element, className, done){
			jQuery(element).animate({ opacity: 0 }, 3000);
		},
		removeClass: function(element, className, done){
			jQuery(element).animate({ opacity: 1 }, 3000);
		}
	};
});

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

[问题]

用于增加图像尺寸的CSS过渡，但不适用于减少。

有谁知道如何修复它？

有谁知道如何修复它？有谁知道如何修理它？有谁知道如何修理它？有谁知道如何修理它？有谁知道如何解决它？

Answer 1

当你从大到小时转换不起作用的原因是因为当图像很大时，所有类都被移除了，这基本上是将img设置为height: auto。

为了使缩小工作，您需要在图像处于“大”状态时为其设置高度值。您可以通过向图像添加类来执行此操作，如下所示：

<img ng-class="myImgClass" src="http://vriz.net/vriz/nma/ch25/static/images/arch.jpg" class="big-image" />

然后像这样设置css：

.big-image {
    height: 400px;
}

这将使“大”状态的图像具有设置的高度属性，并且当单击小按钮时，应用的类将使用“小”状态css覆盖该高度属性。

CSS转换只有在明确设置了转换之间的属性时才有效。

希望这是有道理的。

使用AngularJS动画服务进行CSS转换并不能正常工作

1 个答案: