AngularJs анимация для ng-show быстрее при показе, чем скрытие

У меня есть приложение Angular (1.3.14) (показано ниже), которое должно анимировать ng-show при нажатии на ссылку. Я ожидаю, что он будет расширяться/сокращаться с одинаковой скоростью, но я не могу заставить его работать правильно. Я также не знаю, почему изменение высоты ожидает, пока элемент не изменит прозрачность. Я ожидал, что они произойдут одновременно. Есть идеи?AngularJs анимация для ng-show быстрее при показе, чем скрытие

Вот пример вопроса, имеющего я: https://jsfiddle.net/0wcrcwxe/

angular.module("app", ["ngAnimate"]) 
 
    .controller("WebController", ["$scope", "$q", "$timeout", function($scope, $q, $timeout) { 
 
    \t this.checked = true; 
 
    }]);

.animate-show { 
 
     max-height:9999px !important; 
 
     opacity: 1; 
 
     overflow:hidden; 
 
    } 
 
    .animate-show.ng-hide-add.ng-hide-add-active, 
 
    .animate-show.ng-hide-remove.ng-hide-remove-active { 
 
     transition:all ease 3.35s; 
 
    } 
 
    .animate-show.ng-hide { 
 
     max-height:0 !important; 
 
     opacity:0; 
 
    }

<!DOCTYPE html> 
 
    <html lang="en" data-ng-app="app"> 
 
    <head> 
 
    <title>Example</title> 
 
    </head> 
 
    <body data-ng-controller="WebController as ctrl"> 
 
    
 
    <div> 
 
     <a href="#" data-ng-click="ctrl.checked = !ctrl.checked">Click to show/hide</a> 
 
     <div class="animate-show" data-ng-show="ctrl.checked"> 
 
       I show up all the time<br/> 
 
       I show up all the time<br/> 
 
       I show up all the time<br/> 
 
       I show up all the time<br/> 
 
       I show up all the time<br/> 
 
       I show up all the time<br/> 
 
       I show up all the time<br/> 
 
     </div> 
 
    </div> 
 
    End 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.js"></script> 
 
    </body> 
 
    </html>

источник

2015-03-12 Eric

Может быть, мой вопрос не был ясен. Я бы хотел, чтобы он рухнул и изменил непрозрачность одновременно. – Eric

Его из-за max-height:9999px.

Когда я сменил max-height:150px, он работал должным образом.

Вот скрипка: https://jsfiddle.net/0wcrcwxe/1/

источник

2015-03-12 04:29:13

Знаете ли вы, почему max-height повлияет на это? – Eric

Во время анимации 'max-height' изменяется от' 0 - 9999 или 9999 - 0 в 3,35 секунды'. Во время показа нам нужна минимальная «максимальная высота» 150 пикселей. Изменение значения от 0 до 150 не займет много времени, поэтому мы сможем быстро увидеть изменения. Хотя скрыть Изменение значения с 9999 до 150 займет много времени, поэтому мы можем видеть изменения медленно. –

Это означает, что max-height лишь незначительно лучше высоты, когда речь идет о переходах. – Eric

AngularJs анимация для ng-show быстрее при показе, чем скрытие

ответ

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