css過渡動畫不適用於減小圖像大小

CSS過渡用於增加圖像大小的作品，但不適用於減少。有誰知道如何修理它？css過渡動畫不適用於減小圖像大小

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>

來源

2017-01-22 이신우

您的代碼似乎並不奏效，但在此基礎上我最好的預感是，你應該嘗試加入過渡到實際的圖像，而不是被添加到圖像中的類觸發按鈕點擊。 – DawnPatrol

你的代碼不能正常工作，再加上你的代碼的例子是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; 
}

這裏轉變爲適用於懸停狀態，直到鼠標在它的股利過渡，因爲它離開它會不會工作將於如預期，但只要&變得生澀。 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/

來源

2017-01-22 09:01:03 demonofthemist

您是否考慮過AngularJS動畫服務？ –

css過渡動畫不適用於減小圖像大小

回答

相關問題