Угловая анимация JS не работает

Я пытаюсь показать/скрыть поле сведений в угловых js. Детали отображаются и скрываются, но по какой-то причине анимации нет.Угловая анимация JS не работает

<div class="directoryEntry" ng-repeat="listing in listings"> 
     <span class="category">{{listing.category}}</span> 
        ... 
     <a ng-click="sElement = $index" href="javascript:void(0)">Member Details ></a> 
     <div ng-show="$index == sElement" ng-animate="{show: 'details-show', hide: 'details-hide'}">{{listing.details}}</div> 
    </div>

Это CSS:

.details-show, .details-hide { 
-webkit-transition:all linear 0.5s; 
-moz-transition:all linear 0.5s; 
-ms-transition:all linear 0.5s; 
-o-transition:all linear 0.5s; 
transition:all linear 0.5s; 
} 

.details-show.details-show-active, 
.details-hide { 
opacity:1; 
} 

.details-hide.details-hide-active, 
.details-show { 
opacity:0; 
}

источник

2014-05-30 The Hawk

Почему у вас есть 2 разных класса, а не только класс состояния? например: '.details: {} .details.is-hidden {} .details.is-visible {}' –

Я не знаю, я не знаю, о чем вы говорите. –

У вас есть один элемент с двумя классами '.details-show' и' .details-hide' и 2 разных класса состояний '.details-show-active' и' .details-hide-active', чего он достиг? или он может быть упрощен. –

Сначала убедитесь, что вы включили модуль ngAnimation внутри приложения. Вы должны добавить correct script в вашем HTML и требуют его в объявлении модуля приложения, как это:

angular.module('yourApp', ['ngAnimate']);

Вы также должны использовать .ng-hide-add и .ng-hide-remove для анимации. Чтобы получить дополнительную информацию, вы можете ознакомиться с этим примером в документации AngularJS: https://docs.angularjs.org/api/ng/directive/ngShow#usage_animations

источник

2014-05-30 16:54:24

Угловая анимация JS не работает

ответ

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