angular ionic 中带有键盘事件触发器的动画无法正常工作

Question

在我的 Ionic 应用程序中，我需要在键盘 appear/disappear 时使用 Angular 动画对 ion-content 元素进行动画处理。

我有以下代码：

<ion-content padding [@shiftContent]="isKeyboardOpen">

和

@Component({
  selector: 'page',
  templateUrl: 'page.html',
  animations: [
    trigger('shiftContent', [
      state('0', style({
        top: '0px'
      })),
      state('1', style({
        top: "-200px"
      })),
      transition('* <=> *', animate('50ms')),
    ])
  ]
})

和

  ionViewDidEnter() {

    this.keyboardOpenObs = this.keyboard.onKeyboardShow().subscribe(() => {
      this.isKeyboardOpen = true;
    });
    this.keyboardCloseObs = this.keyboard.onKeyboardHide().subscribe(() => {
      this.isKeyboardOpen = false;
    });
  }

当页面加载并且我第一次打开键盘时没有任何反应，然后当我关闭键盘时它开始工作但方向相反（如果我打开我得到关闭动画，反之亦然）。

如果我用按钮而不是键盘事件控制变量，同样的设置效果很好。

键盘监听器 open/close 有效，我尝试通过记录键盘事件上的变量。

Answer 1

根据给定的问题，我看不出您的代码有任何问题。但是，检查两个输出 angular-animation 为您提供：Start 可能会帮助您确定动画是否执行任何操作完成 (AnimationEvents)。您将收到一个事件，其中包含有关您的新状态的信息。如果你收到了一些，那么你可能需要详细检查你的动画，或者 css 周围。

animationDone(event) {
  console.log(event)
}

animationStarted(event) {
  console.log(event)
}

<ion-content padding
[@shiftContent]="isKeyboardOpen"
(@shiftContext.start)="animationStarted($event)"
(@shiftContext.done)="animationDone($event)">

Answer 2

我是这样解决的：

在我的模板中：

<ion-content [@shiftContent]="isKeyboardOpen">

以及触发键盘的每个输入

          <ion-input
            value=""
            type="text"
            placeholder="Email"
            (ionFocus)="onKeyboardStateChange(true)"
            (ionBlur)="onKeyboardStateChange(false)">
          </ion-input>

然后，在控制器内的页面装饰器中我有动画：

  animations: [
    trigger('shiftContent', [
      state('0', style({
        top: '0px'
      })),
      state('1', style({
        top: "-150px"
      })),
      transition('* <=> *', animate('200ms')),
    ])
  ]

然后是触发动画的方法：

  onKeyboardStateChange(event) {
      if (event) {
        this.isKeyboardOpen = true;
      }
      else {
        this.isKeyboardOpen = false;
      }
    
  }

基本上，我不依赖键盘事件 "onKeyboardShow" 和 "onKeyboardHide"，而是在输入获得焦点时触发动画。这显然是一种解决方法，但就我而言，它解决了问题。

Answer 3

我使用了与 Jonathan 类似的方法（感谢提示！），但使用了 ionic 中的 AnimationController，如下所示

在您想要触发升档的输入上。

<ion-input class="login-input" type="number" formControlName="weight"
          (ionFocus)="onKeyboardStateChange(true)" (ionBlur)="onKeyboardStateChange(false)">
        </ion-input>

将class="content-to-shift"附加到您要向上移动的元素，例如

<ion-content fullscreen="true" class="content-to-shift">

进口

import { AnimationController, Platform } from '@ionic/angular';

构造函数

private animationController: AnimationController,
private platform: Platform

在page.ts

onKeyboardStateChange(event) {
if (this.platform.is('cordova')) {
  if (event) {
    this.isKeyboardOpen = true;
    const anim = this.animationController.create()
      .addElement(document.querySelector('.content-to-shift'))
      .duration(200)
      .iterations(1)
      .fromTo('transform', 'translateY(0px)', 'translateY(-200px)');
    anim.play();
  } else {
    this.isKeyboardOpen = false;
    const anim = this.animationController.create()
      .addElement(document.querySelector('.content-to-shift'))
      .duration(200)
      .iterations(1)
      .fromTo('transform', 'translateY(-200px)', 'translateY(0px)');
    anim.play();
  }
}

}

angular ionic 中带有键盘事件触发器的动画无法正常工作

angular animation in ionic with trigger on keyboard event not working properly

ionic-framework

ionic3

angular-animations