css анимация с угловым

Question

У меня, похоже, проблема с анимацией в сочетании с угловой. У меня есть следующий DIV в моем HTML:

<div class="show-hide" ng-show="questionOfType === '1'">...</div> 

и у меня есть следующие CSS:

.show-hide { 
     -webkit-transition:all linear 2s; 
     transition:all linear 2s; 
    } 

так, что я ожидал, это когда-то questionOfType будет установлен в 1, я буду видеть, содержание дивы появится с анимацией, но она просто выглядит регулярной без анимации. Что я делаю неправильно?

Заранее благодарен.

Answer 1

Вы должны загрузить $animate в качестве модуля

https://docs.angularjs.org/guide/animations

Это пример из своей главной страницы с помощью CSS (и $animate)

<div ng-init="checked=true"> 
    <label> 
    <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible... 
    </label> 
    <div class="check-element sample-show-hide" ng-show="checked" style="clear:both;"> 
    Visible... 
    </div> 
</div> 

$ анимировать работы в сочетании с CSS

еще один пример из угловых документов:

.sample-show-hide { 
    padding:10px; 
    border:1px solid black; 
    background:white; 
} 

.sample-show-hide { 
    -webkit-transition:all linear 0.5s; 
    transition:all linear 0.5s; 
} 

.sample-show-hide.ng-hide { 
    opacity:0; 
} 

Так изменится:

<div class="check-element show-hide" ng-show="questionOfType === '1'">....</div> 

и есть ли у вас модель не использовать, чтобы не показать или скрыть?

Answer 2

К сожалению, переходы CSS не могут быть анимированы между display: block и display: hidden, что и является переходом ng-show.

Вместо этого вы могли бы анимировать прозрачность в диапазоне от 0 до 1:

.show-hide { 
    -webkit-transition: opacity linear 2s; 
    transition: opacity linear 2s; 
    opacity: 0; 
} 
.show-hide.active { 
    opacity: 1; 
} 

И в разметке, переключить active класс I, указанный выше, с использованием ng-class:

<div class="show-hide" ng-class="{'active': questionOfType === '1'}" ng-show="questionOfType === '1'">...</div>