8

新しい ng-animate ディレクティブを使用しようとしていますが、ng-repeat で使用すると目的の効果が得られません。アイテムが入ると大きくなり、出ると小さくなるようにしています。これまでのところ、入力は機能していますが、縮小アニメーションは失敗しています。

私の問題を確認できるように、ここにフィドルを設定しました:-

http://jsfiddle.net/rpk98c/6t42M/1/

関連する HTML は次のとおりです。

<ul>
    <li ng-animate="{enter: 'repeat-enter',
                    leave: 'repeat-leave',
                    move: 'repeat-move'}" ng-click="remove($index)" ng-repeat="name in names">{{name}}</li>
</ul>

そして関連する CSS:-

.repeat-enter-setup, .repeat-leave-setup, .repeat-move-setup {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}

.repeat-enter-setup {
    max-height: 0;
    opacity:0;
}
.repeat-enter-setup.repeat-enter-start {
    max-height: 250px;
    opacity:1;
}
.repeat-leave-setup {
    opacity:1;
    max-height: 250px;
}
.repeat-leave-setup.repeat-leave-start {
    opacity:0;
    max-height: 0;
}

私がどこで間違ったのか知っている人はいますか？

ありがとう、

ライアン

PS IE 10でアニメーションが機能しないことに気付きました! 今のところChromeでテストしています

4

3 に答える 3

0

受け入れられた回答は少し古くなっていますが、この同じ問題に取り組んでいたので、それでも非常に役に立ちました。limitTo最新バージョンの ng-animate とフィルター onを使用した展開/折りたたみ機能の例を次に示しますng-repeat。

HTML:

<div ng-init="listLimit = 3">
    <div class="expander" ng-repeat="item in list | limitTo: listLimit">
        {{ item }}
    </div>
    <div ng-click="listLimit === 3 ? listLimit = list.length : listLimit = 3">
        <span ng-if="listLimit === 3">more</span>
        <span ng-if="listLimit !== 3">less</span>
    </div>
</div>

CSS:

.expander {
  max-height: 250px;
  opacity: 1;
  transition: all linear 0.8s;
}

.expander.ng-enter {
  max-height: 0;
  opacity: 0;
}

.expander.ng-enter-active {
  max-height: 250px;
  opacity: 1;
}

.expander.ng-leave {
  max-height: 250px;
  opacity: 1;
}

.expander.ng-leave-active {
  max-height: 0;
  opacity: 0;
}
于 2016-11-17T18:29:00.267 に答える
0

を指定する理由がわかりませんmax-height。すべての高さの指定を省略でき、機能しているようです。

.repeat-enter-setup, .repeat-leave-setup, .repeat-move-setup {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}

.repeat-enter-setup {
    opacity:0;
}
.repeat-enter-setup.repeat-enter-start {
    opacity:1;
}
.repeat-leave-setup {
    opacity:1;
}
.repeat-leave-setup.repeat-leave-start {
    opacity:0;
}
于 2013-05-15T00:31:29.050 に答える