我正在使用ng-repeat
多个条件。并添加动画。这是我的css代码:
div.appGallery .show {
cursor: pointer;
border: 1px solid #fff;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-o-transition: -o-transform 1s linear;
-ms-transition: -ms-transform 1s linear;
transition: transform 1s linear;
}
div.appGallery .show.ng-enter {
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-o-transform: scale(0.1);
-ms-transform: scale(0.1);
transform: scale(0.1);
border: 1px solid #f00;
}
div.appGallery .show.ng-enter.ng-enter-active {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
border: 1px solid #00f;
}
这适用于chrome
和firefox
。但在ie10
,我没有得到任何过渡。应用过渡时间突然从0.1缩放到0.5。但动画不存在。
这是我的ng-repeat:
<div class="appGallery" ng-show="galleryShow">
<a ng-click="galleryChanger(-1)" ng-show="galleryPrevButton" class="prev">prev</a>
<a ng-click="galleryChanger(1)" ng-show="galleryNextButton" class="next">next</a>
<div index="$index" app="app" ng-click="update(app)" class="show bgr" ng-class="['box'+$index]" ng-if="$index == 0 || $index == 13 || $index == 14 || $index == 15 || $index == 5 " ng-repeat="app in allAppsBatch">
<h2>{{app.PhasePercentage}} % {{index}}</h2>
<span>{{app.Name}}</span>
</div>
<div index="$index" app="app" ng-click="update(app)" class="show bbr" ng-class="['box'+$index]" ng-if="$index == 2 || $index == 3 || $index == 4 || $index == 6 || $index == 10 || $index == 11 || $index == 12" ng-repeat="app in allAppsBatch">
<h2>{{app.PhasePercentage}} % {{index}}</h2>
<span>{{app.Name}}</span>
</div>
<div index="$index" app="app" ng-click="update(app)" class="show bbl" ng-class="['box'+$index]" ng-if="$index == 1 || $index == 7 || $index == 8 || $index == 9 " ng-repeat="app in allAppsBatch">
<h2>{{app.PhasePercentage}} % {{index}}</h2>
<span>{{app.Name}}</span>
</div>
</div>