анимация ng-enter-stagger не работает

Я на самом деле пытаюсь анимировать список div, созданный ng-repeat.анимация ng-enter-stagger не работает

Я хочу, чтобы они появлялись один за другим. Поэтому я увидел, что могу использовать ng-enter-stagger, но он не работает.

Вот мой CSS:

.newsLeft.ng-enter{ 
    -webkit-transition:all linear 0.5s; 
    transition: all linear 0.5s ; 
    opacity:0; 
} 

.newsLeft.ng-enter-stagger{ 
    -webkit-transition-delay:2s; 
    transition-delay:2s; 

    -webkit-transition-duration:0s; 
    transition-duration:0s; 
} 

.newsLeft.ng-enter.ng-enter-active{ 
    opacity:1; 
}

Вот HTML:

<div ng-repeat="news in newsList" class="newsLeft" animate-on-load> 
    <div class="newsComponent" animate-on-load> 
    <hr/> 
    <div class="newsDate">{{news.date}}</div> 
    <div class="newsSubT2">{{news.title}}</div> 
    <div>{{news.content}}</div> 
    </div> 
</div>

источник

2016-05-13 Romain Bouvet

AngularJS версии? – tasseKATT

угловой 1.4.4. Угловая версия может быть проблемой? –

Не уверен. Вы можете показать некоторый HTML? – tasseKATT

Проблема заключается в animate-on-load директива, так что удалить это.

Структурные анимации по умолчанию отключены в течение первого или двух циклов дайджеста после изменения вида. Вы можете переопределить это, используя ng-animate-children="true" в родительском элементе.

Например:

<body ng-animate-children="true"> 
    <div ng-view></div> 
</body>

Демонстрация: http://plnkr.co/edit/AqSt7jaLk0Nq0RKqvdhx?p=preview

Обратите внимание, что это может вызвать другие анимации в представлении (например, для ng-show).

Если вы хотите только анимации для ng-repeat вы можете использовать ng-if так:

<div ng-repeat="news in newsList" class="newsLeft" ng-if="ready"> 
    ... 
</div>

И в контроллере:

$timeout(function() { 

    $scope.ready = true; 
});

источник

2016-06-02 13:31:38 tasseKATT

Я никогда не слышал об анимированных детях! Виноват. Большое вам спасибо за помощь. –

Не чувствуйте себя плохо, это не упоминается очень часто. Я добавил небольшое обновление к моему ответу. И вам все равно :) – tasseKATT

анимация ng-enter-stagger не работает

ответ

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