CSS过渡动画不适用于减小图像的大小
Posted
技术标签:
【中文标题】CSS过渡动画不适用于减小图像的大小【英文标题】：css transition animation doesn't work for decreasing size of image 【发布时间】：2017-06-06 19:46:49 【问题描述】：增加图像大小的 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>【问题讨论】：
您的代码似乎无法正常工作，但基于此，我最好的预感是您应该尝试将过渡添加到实际图像，而不是添加到图像上的类触发按钮点击。 【参考方案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/
【讨论】：
您是否回答过考虑 AngularJS 动画服务？以上是关于CSS过渡动画不适用于减小图像的大小的主要内容，如果未能解决你的问题，请参考以下文章