Angular 2+多个动画随机失败答案

【问题标题】：Angular 2+ multiple animation randomly failsAngular 2+多个动画随机失败
【发布时间】：2019-04-23 18:04:12
【问题描述】：

我需要多个 div 同时淡出。

动画已实现到 10 个不同的 div。

当动画被触发时，它工作得非常好，只是它不适用于具有相同代码的 1 个 div。

这里是动画代码：

   trigger('fadeInOut', [
  state('hide', style({
    opacity: 0,
    display: 'none'
  })),
  state('display', style({
    opacity: 1,
    display: 'inline'
  })),
  transition('display => hide', animate('100ms ease-out')),
  transition('hide => display', animate('100ms ease-out'))  
])

这里是html部分

        <a href="#" class="list-group-item" data-parent="#sidebar">
            <div class="icon-container">
                <i class="fa fa-briefcase"></i>
            </div>
            <div class="fadable" [@fadeInOut]='fadeState'>
                <span>Projects</span>
                <span class="expand-icon">
                    <i class="fa fa-plus-square-o"></i>
                </span>
            </div>
        </a>

还有其他 10 个具有相同代码的锚点...

谁能帮忙？

【问题讨论】：

当我检查损坏的 div 时，课堂上有 ng-animate-queued。不知道为什么它只在那个特定的 div 上。
ngIf 未在任何相关动画中使用。事情只是一个 div 将获得 ng-animate-queued 类，而其他动画工作得很好。生病尝试设置 stackblitz。
你能解决这个@Damian 吗？我面临着完全相同的问题......

标签： angular animation angular-animations

【解决方案1】：

我有同样的问题好几天了，现在我为我解决了。我还有两个元素设置了相同的动画触发器。第一个动画正确，但另一个甚至没有开始。（并分配了“ng-animate-queued”类）

我的问题是同时，第二个元素必须动画（@bounce），父容器也播放动画（@galleryShadow) 这迫使内部元素等待（可能是 Angular 动画引擎的性能决定？）。

因为我在这里找到了可能的解决方案Angular Animations: Animate Parent and Child Elements。我尝试将外部动画分组以查询内部触发器并为其调用 animateChild()。

它解决了我的问题。也许它可以帮助你或任何其他面临这种行为的人（比如我）。

trigger('galleryShadow', [
  state('stage-chosen', style({ display: 'none', transform: 'translateX(100%)' })),
  state('compare-chosen', style({ display: 'none', transform: 'none' })),
  state('presenting', style({ display: '*', transform: 'translate(50%)' })),

  transition('compare-chosen => presenting', [
      style({ display: '*', transform: 'translateX(100%)' }),
      group([
        query('@bounce', animateChild()),
        animate('200ms ease-out')
      ]),
    ]
  ),
  transition('stage-chosen => presenting', [
      style({ display: '*' }),
      group([
        query('@bounce', animateChild()),
        animate('200ms ease-out')
      ]),
    ]
  ),
  transition('presenting => stage-chosen', animate('400ms ease-in')),
  transition('presenting => compare-chosen', animate('400ms ease-in'))
])

【讨论】：