GIFアニメーションを停止する

Question

GIFがたくさんあるページがあります。

<div ng-repeat="sign in signs.List"> 
<img ng-src="{{sign.src}}" width="200" height="150" /> 
</div> 

すべてのGIFのための負荷=>アニメーションをマウスオーバーで

2を停止している私は何ページで

1を探しています=>アニメーションはその1つのGIFのために開始し

3オンmouseout =>アニメーションがそのGIFでもう一度停止する

これはAngularJsで行うことができますが、どうすればよいかわかりません。

Answer 1

デフォルトでは、gifアニメーションループを制御することはできません。 このような状況では、最も簡単な方法は2つの画像を持つことです：1つはアニメーション化し、もう1つは単純な画像にする必要があります。 両方をコンテナの内側に置き、ホバー上にのみアニメーション表示する必要があります。そのような何か：あなたがイメージのバージョンをアニメ化していないしていないし、いくつかの理由のためにそれを提供できない場合

.animated { 
    display:none 
} /* by default animated pic is hidden */ 
.img-container:hover .animated { 
    display:block; 
} 
.img-container:hover .simple { 
    display: none; 
} /* hide simple image and display animated on mouseover */ 

：

<div class="img-container" ng-repeat="sign in signs.List"> 
    <img class="animated" ng-src="{{sign.animated_src}}" width="200" height="150" /> 
    <img class="simple" ng-src="{{sign.simple_src}}" width="200" height="150" /> 
</div> 

あなたがCSSであなたは、このコードを配置しますが、キャンバスを使用してブラウザでプログラムで作成することができます。ここでそれを行う方法のnice explanationです。