11

単純な (しかし、私にとっては!) angularjs の表示/非表示アニメーションの問題。

高低を検索しましたが、この特定の問題の解決策は見つかりませんでした。これは、例と「課題」で最もよく説明できるでしょう。

まず、例: http://jsfiddle.net/adammontanaro/QErPe/1/

課題: 現在表示されている画像の下または上に表示され、上部の画像の div が非表示になると所定の位置にポップするのではなく、これらの画像を互いにフェードインおよびフェードアウトさせることはできますか?

HTML:

<div>
    <div data-ng-repeat="k in kitties" >
        <img ng-src="{{k}}" ng-show="selectedImage==$index" ng-animate="{show:'animate-show', hide:'animate-hide'}" />
    </div>
</div>

CSS:

.animate-show, .animate-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;

}

.animate-show {
  opacity:0;
}

.animate-show.animate-show-active {
  opacity:1;
}

.animate-hide {
  opacity:1;
}

.animate-hide.animate-hide-active {
  opacity:0;
}

私はこれで何時間も車輪を回転させてきました。単一の画像または div を表示または非表示にする方法を示す優れた投稿の群れを見てきましたが、単純なクロスフェードと置換を試みると、すべてが機能しなくなります。絶対/相対位置をいじってみましたが、役に立ちませんでした。

これをスイッチで試してみましたが、スイッチ条件で $index を使用できなかったため、実行時にイメージをロードできました。それがここでの大きな要件です。

参考までに-これはangular 1.1.5を使用しています

ありがとうございました！！！アダム

4

3 に答える 3

0

これは実際には、角度の問題というよりも CSS の問題のようです。2 つの div を互いの上に配置し、実際に同時に同じスペースを占有していることを確認する必要があります。その後、クロスフェードは簡単です。

于 2013-09-25T00:58:32.273 に答える
0

.ng-hide クラスでプレーンな CSS3 を実行することもできます。例えば：

div img {
    border: medium none;
    margin: 0;
    padding: 0;
    opacity: 1;
    -webkit-transition: opacity 1s ease 0s;
    -moz-transition: opacity 1s ease 0s;
    -o-transition: opacity 1s ease 0s;
    transition: opacity 1s ease 0s;
}
div img.ng-hide {
    opacity: 0;
}

そのため、ng-hide クラスが追加されると、画像の不透明度がフェードします。ngAnimate には適切な場所がありますが、.ng-hide クラスの単純な CSS3 を使用すると、フラストレーションを解消できます。

于 2015-02-10T23:52:53.317 に答える