angular ionic 中带有键盘事件触发器的动画无法正常工作
angular animation in ionic with trigger on keyboard event not working properly
在我的 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 有效,我尝试通过记录键盘事件上的变量。
根据给定的问题,我看不出您的代码有任何问题。但是,检查两个输出 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)">
我是这样解决的:
在我的模板中:
<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",而是在输入获得焦点时触发动画。这显然是一种解决方法,但就我而言,它解决了问题。
我使用了与 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();
}
}
}
在我的 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 有效,我尝试通过记录键盘事件上的变量。
根据给定的问题,我看不出您的代码有任何问题。但是,检查两个输出 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)">
我是这样解决的:
在我的模板中:
<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",而是在输入获得焦点时触发动画。这显然是一种解决方法,但就我而言,它解决了问题。
我使用了与 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();
}
}
}