CSS过渡动画不适用于减小图像的大小

Question

增加图像大小的 CSS 过渡效果，但不适用于减小图像大小。有人知道怎么解决吗？

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

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

Answer 1

您的代码不起作用，而且您的代码示例是 CSS 和 HTML 令人困惑。

但我要回答，因为据我了解，这似乎是人们对悬停所犯的最基本错误之一 :) @DawnPatrol 在他的评论中指出了这一点！

当您要应用过渡时，该过渡属于元素，因此它是决定如何执行实际过渡的元素的行为。因此，它应该应用于任何特定状态的元素 no！

方法错误：

<div class="box"></div>


.box{
  width: 100px;
  height: 100px;
  background: red;
}
.box:hover{
  transform: scale(2);
  -webkit-transition: all 0.3s; 
  -moz-transition: all 0.3s; 
  -ms-transition: all 0.3s; 
  -o-transition: all 0.3s ; 
  transition: all 0.3s;
}

这里的过渡适用于悬停状态，因此在鼠标悬停在 div 上之前，过渡将按预期进行，但一旦离开，它将无法工作并变得生涩。当您将转换代码应用于“活动”、“禁用”等其他类时，也会发生同样的情况

演示：https://jsfiddle.net/a6a9d0e6/

正确方法：

<div class="box"></div>


.box{
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: all 0.3s; 
  -moz-transition: all 0.3s; 
  -ms-transition: all 0.3s; 
  -o-transition: all 0.3s ; 
  transition: all 0.3s;
}
.box:hover{
  transform: scale(2);
}

无论添加什么类以及元素处于什么状态，此处悬停都会按预期工作，因为转换不是特定于特定状态或类的。

演示：https://jsfiddle.net/a6a9d0e6/1/