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

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()函数。

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

  ask by mevqz translate from so

本文未有回复,本站智能推荐:

1回复

如何使用Angular6制作无限动画?

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

如何使用Angular动画复制jQueryslideUp()/slideDown()?

我想基本上通过* ngIf指令向元素添加平滑的动画(类似于jQuery的slideUp / slideDown方法)。 到目前为止,我已经尝试过了: 模板: 这无法正常工作。 发生的情况是在其上设置了动画的div似乎已正确设置了动画,但是其内容(表单组件)立即变得完整可见。 我还
1回复

使用变量Angular4进行动画

我正在使用@angular/animations: 4.4.6尝试为将显示大量文本的组件设置展开/折叠动画。 默认情况下,它会显示一定数量的文本,但不同的父组件可以定义不同的折叠高度。 据我所知,我做的一切都是正确的。 但是animations装饰器忽略了输入,直接使用默认值。 和 html: &l
1回复

使用Angular2+动画遮罩位置

我在用angular的动画库对mask-position属性进行动画处理时遇到了麻烦,希望有人能指出我要去哪里。 我知道这可行: 但是,当我尝试将其转换为角度时,动画完成后只是“弹出” ,而不是动画。 这是我当前的角度动画: 注意:由于我使用的是chrome,因此必须使用webk
1回复

Angular2使用组件外部的动画

我已经快速创建了一个简单的组件 我用这种方式在我的模板中调用它: 无论如何从我的组件外部调用inOut动画(即在我引用此组件的模板中)。 我理想的是在我的组件本身上使用这个动画: 但是,它确实会触发错误,说明我的inOut动画未定义。
1回复

使用Angular4在svg的动画元素之间切换

我想对Angular 4组件中的svg进行动画处理。 如何在svg组件中获取不同的ID并对其进行顺序动画处理? 我可以通过click事件在svg的单个元素上触发单个动画,但是如何在页面加载时触发该动画? 我有以下component.ts代码: 由于svg的复杂性,组件的html部分
2回复

我如何在Angular2中为路由器组件使用动画

我想在活动路由器链接更改时为我的组件设置动画。 我如何编写动画代码,以便当路由器更改时,一个组件淡出然后另一个淡入? 我一直在尝试的代码如下。 但我认为我的概念是错误的,因为我试图在至少 2 个组件中使用那段代码,但它们都没有淡入或淡出。 这可能与此功能有关还是我以错误的方式解决问题?
1回复

Angular:使用query()+animate()时如何保持最终动画状态

看到这个plunker: https ://plnkr.co/edit/mqwJP75zjTUmsqsqRxfH ? p = preview 这是Angular v5.1.3。 在向上+淡入(不透明度1)和向下淡出(不透明度0)状态之间切换按钮。 我很困惑为什么在动画结束后down状态