Question

所以我有这个组件。我们称之为AnimationComponent：

<div
  id="{{id}}"
  [@defaultAnimationSet]='animationState'
  (@defaultAnimationSet.start)="onAnimationStart($event)"
  (@defaultAnimationSet.done)="onAnimationEnd($event)">
  <ng-content></ng-content>
</div>

根据提供的prop类型自动设置动画状态。 animationState在“默认”和您作为道具提供的type之间切换。假设您提供了opacity，它将在“默认”和“不透明”之间切换。

现在我在这里使用此AnimationComponent：

<app-animation [type]='activeTransitionType'>
  <div class='content' *ngIf='showContent'>
    Some content here!
  </div>
</app-animation>

这是我在defaultAnimationSet中制作的动画之一：

const opacityEnterAnimation = animation([
  query(':enter', [
    style({ opacity: 0 }),
    animate('1s', style({ opacity: 1 }))
  ], { optional: true })
]);

const opacityLeaveAnimation = animation([
  query(':leave', [
    animate('0.25s',
      style({ opacity: 0 })
    ),
  ], { optional: true })
]);

const opacityAnimation = [
  state('opacity', style({ opacity: 1 })),
  transition('void => opacity', [
    useAnimation(opacityEnterAnimation)
  ]),
  transition('opacity => void', [
    useAnimation(opacityLeaveAnimation)
  ])
];

export const defaultAnimationSet = [
 ...opacityAnimation
];

预期：在该组件中包含的* ngIf内容上应用不透明度Enter并保留动画。
实际：完全无效！ :enter和:leave似乎找到了输入的内容/左侧的内容，但未对它们应用过渡。

动画：enter：在ng-content

0 个答案: