Question

我有一个包含大量GIF的页面。

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

我正在寻找什么

1页面加载=＆gt;停止所有GIF的动画

2 on mouseover =＆gt;动画开始于那个gif

3 on mouseout =＆gt;动画再次停止为那个gif

我想这可以在AngularJs中完成，但我不知道如何。

Answer 1

默认情况下，您无法控制gif动画循环。在这种情况下，最简单的方法可能是拥有2个图像：一个应该是动画，另一个应该是简单的图像。您应将它们放在容器内，并仅在悬停时显示动画。这样的事情：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TestPage } from './test';

@NgModule({
  declarations: [
    TestPage,
  ],
  imports: [
    IonicPageModule.forChild(TestPage),
  ],
  exports: [
    TestPage
  ]
})
export class TestPageModule {}

在你css然后你放置这个代码：

<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>

如果您没有图像的动画版本并且由于某种原因无法提供它：您可以使用画布在浏览器中以编程方式进行编辑。以下是nice explanation如何做到这一点。

停止gif动画onload

1 个答案: