Angular 2 多个动画随机失败

Question

我需要多个Divs才能同时淡出。

动画已实施到10个不同的divs。

当动画触发时，它的工作原理非常好，除非它对1div无法使用相同的代码工作。

此处的动画代码：

   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 part

        <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个带有相同代码的锚点...

任何人可以帮忙吗？

Answer 1

我有几天的问题，现在我为自己修复了它。我还设置了两个动画触发器的两个元素。第一个动画正确，而另一个甚至没有启动。（并分配了" NG-Animate-Queed"类）

在我的情况下，问题是，与此同时，第二个元素必须动画（ @bounce ），父容器还播放了一个动画（ @gallerershadow 哪个迫使内部元素等待（可能是Angular Animation Engine的性能决定？）。

由于我在此处找到了一个可能的解决方案Angular Animations：动画父母和子女元素。我试图将外部动画分组以查询内部触发器，并为其称为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'))
])