Question

我正在尝试创建一个指令，以在显示视图时为fab-button设置动画。如果动画位于ngOnInit内，则该动画有效，但由于离子路径策略，当我离开页面并返回时，动画不起作用。将其放在ionViewDidEnter中不起作用，因为我认为ionViewDidEnter在指令中不起作用。那么我有什么办法可以解决这个问题？

 <ion-fab vertical="bottom" horizontal="end" slot="fixed">
        <ion-fab-button mode="md" appAnimateFab>
          <ion-icon name="create" mode="md"></ion-icon>
        </ion-fab-button>
    </ion-fab>`


    @Directive({
      selector: 'ion-fab-button[appAnimateFab]'
    })
    export class AnimateFabDirective implements OnInit {

      constructor(
        private animationBuilder: AnimationBuilder,
        private element: ElementRef
      ) { }
      ngOnInit() {

      }

      ionViewDidEnter() {
        console.log(this.element);
        const factory = this.animationBuilder.build([
          style({transform: 'rotate(-45deg)'}),
          animate('5s ease-in', style({transform: 'rotate(0deg)'}))
        ]);
        const anim = factory.create(this.element.nativeElement);
        anim.play();
      }
    }

Answer 1

这是一个有趣的问题。昨天，当我意识到您实际上是在询问指令而不是自定义组件时，我写了一份详细的答复，所以中途了。所以我的所有研究都是错误的哈哈。

今天，我又看了一眼。似乎所有教程都方便地错过了处理页面向前和向后更改的需求，而只是依靠ngOnInit。

摸了一下脑袋后，我开始想知道如何触发它，我在想：Intersection Observer API呢？

我真的很喜欢Alligator.io解释事情的方式：

Using the Intersection Observer API to Trigger Animations and Transitions

他们的示例显示了每次向下滚动查看时都会触发的动画。

如果您要翻动页面，则感觉它应该触发才能显示出来，但是我还没有使用代码对其进行测试。

对于使用Intersection Observer API的更注重离子的示例，Josh提供了一个教程：

Animating List Items in Ionic with the Intersection Observer API | joshmorony - Learn Ionic & Build Mobile Apps with Web Tech

也许您可以修改它以使用您的动画代码？

如何在指令中使用ionViewDidEnter

1 个答案: