2

初めて角度アニメーションを使用しようとしましたが、何が間違っているのかわかりません。

Angular 自体と Animation モジュールの両方に AngularJS v1.3.0-build.2805 を使用しています。

-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>

ここで何が欠けていますか??

4

1 に答える 1

4

yearofmoo による angularjs での驚異的なアニメーションに関する素晴らしいチュートリアルを次に示します。

あなたの質問へのコメントに記載されているように、ピクセルビットによる：

ロード時にアニメーションをずらしたい場合は、配列全体をスコープに割り当てるのではなく、アイテムを配列にプッシュする必要があります。

彼はまた、アニメーションを適切に作成する方法を示す素敵な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>

スタイル.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;
}
于 2014-06-25T08:50:07.743 に答える