Dans mon application Ionic, j'ai besoin d'animer l'élément de contenu ionique avec une animation angulaire lorsque le clavier apparaît / disparaît.
J'ai le code suivant:
ionViewDidEnter() {
this.keyboardOpenObs = this.keyboard.onKeyboardShow().subscribe(() => {
this.isKeyboardOpen = true;
});
this.keyboardCloseObs = this.keyboard.onKeyboardHide().subscribe(() => {
this.isKeyboardOpen = false;
});
}
et
@Component({
selector: 'page',
templateUrl: 'page.html',
animations: [
trigger('shiftContent', [
state('0', style({
top: '0px'
})),
state('1', style({
top: "-200px"
})),
transition('* <=> *', animate('50ms')),
])
]
})
et
<ion-content padding [@shiftContent]="isKeyboardOpen">
3 Réponses :
Je ne vois aucun problème dans votre code lié au problème donné. Mais ce qui pourrait vous aider à savoir si votre animation fait quelque chose, c'est de vérifier les deux sorties que angular-animation vous fournit: Démarrer et Terminé ( AnimationEvents ). Vous recevrez un événement contenant des informations sur vos nouveaux états. Si vous en recevez, vous devrez peut-être vérifier votre animation en détail ou le css autour.
<ion-content padding [@shiftContent]="isKeyboardOpen" (@shiftContext.start)="animationStarted($event)" (@shiftContext.done)="animationDone($event)">
animationDone(event) {
console.log(event)
}
animationStarted(event) {
console.log(event)
}
Merci, c'est un bon début pour déboguer ceci. En attendant, j'arrive au résultat d'une autre manière, en évitant les rappels d'ouverture / fermeture du clavier et en contrôlant l'animation avec les événements ionFocus et ionBlur sur chaque champ de saisie. L'animation reste la même, cela me fait penser que le problème est lié aux rappels clavier (c'est étrange car tu les appelles correctement, je les ai testés en impression dans la console). Cela fonctionne mais je dois appeler l'événement à partir de n'importe quelle entrée.
Puis ma question - Avez-vous un événement Terminé ou Début ou est-ce que cela n'atteint jamais l'animation. Ce qui pourrait également aider est la mise en état via observable et | async pipe - Ensuite, vous pouvez écouter (vous abonner) votre entrée d'animation et vérifier quelles valeurs entrent dans l'animation, sans avoir besoin de trouver la place animationState = foo.
Je l'ai résolu de cette manière:
Dans mon modèle:
onKeyboardStateChange(event) {
if (event) {
this.isKeyboardOpen = true;
}
else {
this.isKeyboardOpen = false;
}
}
et sur chaque entrée qui déclenche le clavier
animations: [
trigger('shiftContent', [
state('0', style({
top: '0px'
})),
state('1', style({
top: "-150px"
})),
transition('* <=> *', animate('200ms')),
])
]
alors, dans le décorateur de page à l'intérieur du contrôleur, j'ai l'animation:
<ion-input
value=""
type="text"
placeholder="Email"
(ionFocus)="onKeyboardStateChange(true)"
(ionBlur)="onKeyboardStateChange(false)">
</ion-input>
puis la méthode pour déclencher l'animation:
<ion-content [@shiftContent]="isKeyboardOpen">
En gros, au lieu de me fier aux événements du clavier "onKeyboardShow" et "onKeyboardHide", je déclenche l'animation lorsque l'entrée se concentre. C'est clairement une solution de contournement, mais dans mon cas, cela a résolu le problème.
J'ai utilisé une approche similaire à celle de Jonathan (merci pour le conseil!) mais en utilisant AnimationController d'ionic, comme suit
Sur les entrées que vous voulez déclencher le décalage vers le haut.
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();
}
}
J'ai exactement le même problème. Pourriez-vous ouvrir un numéro sur GitHub chez Ionic? J'ai essayé de le déboguer un jour de trou sans succès ... On dirait que l'événement iOS bloque les événements ioniques d'une manière ou d'une autre.
@muuvmuuv, j'ai trouvé une bonne solution de contournement, je l'ai postée ci-dessous, cela peut vous être utile.