CSS-Übergang Animation funktioniert nicht für abnehmende Größe des Bildes

CSS-Übergang für die zunehmende Größe des Bildes funktioniert, funktioniert aber nicht für die Verringerung. Weiß jemand, wie man es repariert?CSS-Übergang Animation funktioniert nicht für abnehmende Größe des Bildes

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>

Quelle

2017-01-22 이신우

Sie Code scheint nicht zu funktionieren, aber auf der Grundlage dieser meine besten Vermutung ist, dass Sie den Übergang zum eigentlichen Bild Hinzufügen versuchen sollten in Bezug auf die Klassen im Gegensatz, die das Bild hinzugefügt werden auf den Auslöser der Schaltfläche klickt. – DawnPatrol

Sie Code funktioniert nicht, plus Ihre Codes Beispiele sind CSS & HTML verwirrend.

Noch werde ich antworten, denn soweit ich verstehe, scheint das einer der grundlegendsten Fehler zu sein, den Leute mit den Schwebeln machen :) Das gleiche wird von @DawnPatrol in seinem Kommentar gezeigt!

Wenn Sie eine Transition anwenden möchten, gehört diese Transition zu dem Element. Daher ist es ein Verhalten des Elements, das bestimmt, wie die tatsächliche Transition ausgeführt wird. Daher sollte es auf Element no in einem bestimmten Zustand angewendet werden!

Falsche Methode:

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

Hier Übergang für den Hover-Zustand, so, bis die Maus, um es über den div Übergang stattfinden wird, wie erwartet, aber sobald es ihm Arbeit würde nicht verlassen werden & werden ruckartig. Gleiche geschieht, wenn Sie ÜBERLEITUNG Code, um zusätzliche Klassen wie ‚aktiv‘, ‚behindert‘

Demo gelten: https://jsfiddle.net/a6a9d0e6/

Rechts Methode:

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

Hier schweben wird wie erwartet egal Welche Klassen werden hinzugefügt? & In welchem Status sich das Element befindet, da der Übergang nicht für einen bestimmten Status oder eine bestimmte Klasse spezifisch ist.

Demo: https://jsfiddle.net/a6a9d0e6/1/

Quelle

2017-01-22 09:01:03 demonofthemist

Haben Sie mit dem Animal Service AngularJS geantwortet? –

CSS-Übergang Animation funktioniert nicht für abnehmende Größe des Bildes

Antwort

Verwandte Themen