Question

在我的Ionic应用程序中，当键盘出现/消失时，我需要使用Angular动画对离子含量元素进行动画处理。

我有以下代码：

<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;
    });
  }

当页面加载并第一次打开键盘时，什么也没发生，然后当我关闭键盘时，它开始工作，但方向相反（如果我打开，则显示关闭动画，反之亦然）。

如果我使用按钮而不是键盘事件来控制变量，则相同的设置非常有用。

键盘打开/关闭的侦听器工作正常，我尝试通过在键盘事件上记录变量来进行尝试。

Answer 1

我以这种方式解决了：

在我的模板中：

<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 2

我使用了与乔纳森（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();
  }
}

}

Answer 3

从给定的问题中我看不到您的代码中的任何问题。但是，找出动画是否有帮助的方法可能是检查角度动画为您提供的两个输出：开始和完成（ AnimationEvents）。您将收到一个事件，其中包含有关新状态的信息。如果收到一些，则可能需要详细检查动画或css。

const exampleJson = {"name":"Jon","facts":{"car":"Ford","address":{"city":"New York"},"watch":"Casio","other": {}}};

const prettify = obj => {

  tabs = n => Array(n).fill(' ').join('');

  let traverse = (obj, tab = 1) => {
    let markup = '{\n';

    Object.entries(obj).forEach(kv => {
      const [key, val] = kv;
      if (typeof val === 'string') {
        const { length } = Object.keys(val);
        markup += `${tabs(tab)} "${key}": "${val}"`;
      } else if (typeof val === 'object') {
        const { length } = Object.keys(val);
        if (length > 0) {
          markup += `,\n${tabs(tab)} "${key}": ${traverse(val, tab+2)},\n`;
        } else {
          markup += `,\n${tabs(tab)} "${key}": {}`;
        }

      }
    })
    
    markup += `\n${tabs(tab - 1)}}`;
    return markup;
  }

  let results = traverse(obj);

  console.log(results.replace("\,\n\n", "\n"));
}

prettify(exampleJson);

.as-console-wrapper { max-height: 100% !important; top: auto; }

离子中的角度动画，键盘事件触发不正常

3 个答案: