угловая анимация в ионном режиме с триггером на клавиатуре не работает должным образом - PullRequest
Новая
       21

угловая анимация в ионном режиме с триггером на клавиатуре не работает должным образом

0 голосов
/ 05 марта 2019

В моем приложении Ionic мне нужно анимировать элемент ion-content с помощью Angular animation, когда клавиатура появляется / исчезает.

У меня есть следующий код: 

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

Когда страница загружается и я открываю клавиатурув первый раз ничего не происходит, затем, когда я закрываю клавиатуру, она начинает работать, но в противоположном направлении (если я открываю, я получаю анимацию закрытия и наоборот).

Та же самая установка прекрасно работает, если я контролируюпеременная с кнопкой вместо события клавиатуры.

Слушатель клавиатуры открывает / закрывает работает, я попытался записать переменную на событие клавиатуры.

1 Ответ

0 голосов
/ 05 марта 2019

Я не вижу никаких проблем в вашем коде из указанных проблем. Но что может помочь вам узнать, что ваша анимация что-то делает, так это проверить два выхода: angular-animation предоставляет вам: Start и Done ( 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)">
...