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

You код не работает, плюс ваши примеры кодов 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 animate? –

css переход анимации не работает для уменьшения размера изображения

ответ

Смежные вопросы