1

カードを表示時にスライドインし、非表示時にスライドするngAnimateがあります。スライド インは機能しますが、スライド アウトはアニメーション効果がありません。

html ...

<div  ng-hide="cardback.id == '{{n.id}}'" ng-show="cardback.id != '{{n.id}}'" ng-animate="{show: 'example-show', hide: 'example-hide'}">

そしてcssは

.example-show, .example-hide {
  -webkit-transition:all linear 1s;
  -moz-transition:all linear 1s;
  -ms-transition:all linear 1s;
  -o-transition:all linear 1s;
  transition:all linear 1s;
}

.example-show {
  top:-200px;
}
.example-show-active {
  top:0px;
}

.example-hide {
  top:0px
}
.example-hide-active {
  top:-200px;
}

6月3日付けの1.1.5を実行しています

4

1 に答える 1

0

いくつかのこと：

  1. ダブルカーリーは本当にあるべきではありません。ng-hide/show値はすでに角度式であるため、必要ありません。たとえば、次のようにすれば十分です

    ng-hide="cardback.id == n.id"

  2. ng-hide/show正反対の条件で同じ要素を使用するのは奇妙に思えます。1枚で十分だと思います。

  3. noが定義されていましたがtop、transition プロパティとして使用しました。positionそれは貼り付けミスの可能性がありますが、そうでない場合は、それも確認する必要があります。

これが実際の例です。あなたの側からのさらなる入力がなければ、それは単なる当て推量です。

于 2013-08-08T14:42:09.490 に答える