#angularjs #angularjs-animation
#angularjs #angularjs-анимация
Вопрос:
Первый раз пытаюсь использовать угловую анимацию и не могу понять, что я делаю не так.
Я использую AngularJS версии v1.3.0-build.2805 как для самого Angular, так и для модуля анимации.
-1. Модуль включен
angular.module('profileApp', [
'ngAnimate'
]);
-2. Определение стилей в css
.fade-in{
transition: 1s linear all;
-webkit-transition: 1s linear all;
}
.fade-in.ng-enter,
.fade-in.ng-leave.ng-leave-active{
opacity: 0;
}
.fade-in.ng-enter.ng-enter-active,
.fade-in.ng-leave{
opacity: 1;
}
-3. Включение класса в ng-repeat
<a class="item fade-in" ng-repeat="item in collection" href="{{client.getPath('product/' item.slug)}}">
<div class="thumb">
<img ng-src="{{item.images[0].imagename}}" alt="{{item.style_name}}">
</div>
<h3>{{item.style_name}}</h3>
</a>
Что я здесь упускаю из виду??
Комментарии:
1. Если вы хотите перемещать анимацию при загрузке, вам нужно помещать элементы в свой массив, а не назначать весь массив для области видимости. Вот плунжер: plnkr.co/edit/ZceaB0Twapvqek37NnJp?p=preview
2. Большое спасибо за ваш ответ! Очень полезно.
Ответ №1:
Вот отличный учебник по ошеломляющей анимации в angularjs от yearofmoo
как указано в комментариях к вашему вопросу, от pixelbits:
Если вы хотите перемещать анимацию при загрузке, вам нужно помещать элементы в свой массив, а не назначать весь массив для области видимости.
он также предоставил хороший plunkr, который показывает, как правильно создавать анимацию.
list.html
<div id="list-wrap">
<ul id="page-list">
<li class="page-list-item" ng-repeat="item in items" ng-click="tapHandle(this)">
<span class="page-list-text">{{ item }}</span>
</li>
</ul>
</div>
style.css:
.page-list-item.ng-enter-stagger,
.page-list-item.ng-leave-stagger {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
-webkit-transition-duration: 0;
-moz-transition-duration: 0;
-ms-transition-duration: 0;
-o-transition-duration: 0;
transition-duration: 0;
}
.page-list-item.ng-enter {
-webkit-transition: 0.2s linear all;
-moz-transition: 0.2s linear all;
-ms-transition: 0.2s linear all;
-o-transition: 0.2s linear all;
transition: 0.2s linear all;
-ms-opacity: 0;
opacity: 0;
}
.page-list-item.ng-enter.ng-enter-active {
-ms-opacity: 1;
opacity: 1;
}
.page-list-item.ng-leave {
-webkit-transition: 0.2s linear all;
-moz-transition: 0.2s linear all;
-ms-transition: 0.2s linear all;
-o-transition: 0.2s linear all;
transition: 0.2s linear all;
-ms-opacity: 1;
opacity: 1;
}
.page-list-item.ng-leave.ng-leave-active {
-ms-opacity: 0;
opacity: 0;
}