繁体   English   中英

使用Angular 6无限循环动画

Loop animation infinitely with Angular 6

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一些图像使用的简单淡入淡出动画:

trigger('fadeInAnimation', [
  transition(':enter', [
    style({ opacity: 0 }), 
    animate('500ms ease-in')
  ])
])

在此html中使用:

<div 
    [@imgAnimation]="animationState"
    (@imgAnimation.done)="animationEnd($event)" >

        <img src="icon-1.png" 
            @fadeInAnimation>

        <img src="icon-2.png"
          @fadeInAnimation>

有一个父动画:imgAnimation。 那就是运行子动画的那个:

trigger('imgAnimation', [
  transition(':enter', [
    group([
      query('@fadeInAnimation', [stagger(500, animateChild())]),
    ])
  ]),
])

那很好,但是我需要无限循环这个“ imgAnimation”动画。

通过搜索,我发现无限循环的一种方法(或唯一方法)是通过侦听动画“完成”事件来切换动画状态。

所以我尝试了一下,但没有成功。 下一个代码应该在动画完成后再运行一次,但是它只能运行一次(对于':enter'事件是第一次)。

public animationDone(event) {
    this.animationState = 'loop-state';
}

然后将状态转换处理程序添加到触发器:

trigger('imgAnimation', [
  transition(':enter', [
    group([
      query('@fadeInAnimation', [stagger(500, animateChild())]),
    ])
  ]),

  transition('loop-state <=> start-state', 
    // animate('2s linear', style({transform: 'scale(0.5)' })),
    group([
      query('@fadeInAnimation', [stagger(500, animateChild())]),
    ])
  ),
])

但这是行不通的(group()函数中的所有内容)。 尽管如此,它并不会忽略“ animationState”的状态更改,我知道这是因为,如果取消注释“ animate()”行,它会执行得很好(仅animate()),但是它不适用于group()函数。

有任何想法吗? 提前致谢。

问题暂未有回复.您可以查看右边的相关问题.
2 如何使用 Angular6 制作无限动画?

我使用 html 和 css 制作了一辆 3d 卡车。 如果任何变量 ( x ) 为真,则卡车轮胎旋转 360 度。 如果 x=false,卡车轮胎停止旋转。 我用 css 做这个,只是为了无限旋转。 这个 css 代码正在工作,但没有根据变量停止轮胎。 我决定用 Angular Animati ...

3 使用动画为无限滚动创建无限循环

我正在尝试循环功能/动画。 我希望页面滚动到底部,然后跳到顶部并无限进行。 我有执行此操作的代码,但只有一次: main_container是在整个页面上延伸的div。 我尝试添加pagescroll(); animate后,删除window.scroll(0,0) ,并在dur ...

2014-10-15 10:15:15 1 60   jquery
4 jQuery动画无限循环

我对Javascript和jQuery很陌生,我有这个jQuery动画,我想无限循环,但由于我真的不知道如何在重新启动之前重设动画属性,因此我似乎无法使其运行它。 一些帮助使此动画成无限循环并对其进行解释非常感谢! 这是我到目前为止的内容: ...

5 如何无限循环播放此动画?

我是jquery的新手,我设法编写了一个淡入淡出两张图片的小动画。 我现在的问题是,在绕过周期之后,它就停止了。 当它到达终点时,我需要它从头开始。 它应该继续。 这是代码 ...

7 动画上的无限循环

我需要一个div滑出屏幕的左边,当宽度完成时,它必须重新启动。 比如它无休止地在一个圆圈中奔跑。 我在搜索stackoverflow后设法找到了这个。 9913是我在div中的div的当前宽度。 现在它只是完成9913宽度然后结束动画,它需要重新开始而不显示空白,例如当它击中9 ...

8 无限循环动画

我试图创建一个无限循环的动画,但我遇到了一些麻烦。 我正在使用这行代码使我的视图“悸动”红色,但是当我调用此行时,它可以工作但是我的UI没有响应。 我的问题是:1)这是正确的方法吗? 2)为什么这会使UI无响应? ...

10 Javascript动画无限循环

我正在用javascript写一个简单的动画(我不能使用CSS),而且似乎没有使其无限的功能。 这是我到目前为止所拥有的: 球将是元素,而i是for循环中的迭代元素,其中对每个元素调用该函数。 而size是我希望元素扩展到的最大大小。 我希望有一个平稳的过渡,其中5个球将连续 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM