web-dev-qa-db-ja.com

AngularJS ng-ng-repeat内でアニメーションのクロスフェードを表示します

単純な(しかし私にとってはそうではありません!)angularjsのアニメーションの表示/非表示の問題。

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

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

課題:または/に表示されるのではなく、誰でもそれらの画像をover互いにフェードインおよびフェードアウトさせることができますか?above現在表示されている画像で、上の画像の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を使用しています

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

11
Adam Montanaro

あなたは実際にそれをすべて正しく持っています!ちょっとしたCSSが足りません。

私はあなたのjsfiddleを正しいもの(相対的および絶対的な位置のダッシュと高さのピンチ)で修正しました、そしてそれは魅力のように機能します。

新しいものの大部分は次のとおりです。

.container{
    position: relative;
    /* you have to add a height here if your container isn't otherwise set 
       becuse the absolutely positioned image divs won't calculate the height 
       for you */
    height: 100px;
}
.image-repeat{
    position: absolute;
    top: 0;
    left: 0;
}

必要に応じてHTMLに適用されたクラスを使用します。

それをチェックしてください: http://jsfiddle.net/QErPe/2/

お役に立てば幸いです。

7
betaorbust

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

0
Fourth

.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を使用すると、フラストレーションを解消できます。

0
WebDevJ