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＆amp; 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转换将按预期发生，但一旦它离开它将不会工作＆amp;变得生涩将过渡代码应用于其他类（例如“活动”，“已禁用”

）时也会发生相同的情况

演示：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/

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

1 个答案: