Ionic iOS端键盘唤起后页脚突兀上移，如何实现平滑跟随？

以下几种方法可以解决页脚突兀跳动的问题，实现平滑过渡：

• 利用Capacitor/Ionic键盘插件的原生配置
  如果你用Capacitor，在capacitor.config.ts中配置Keyboard插件，启用原生的平滑动画：

  import { CapacitorConfig } from '@capacitor/cli';
  
  const config: CapacitorConfig = {
    appId: 'your.app.id',
    appName: 'YourApp',
    webDir: 'www',
    bundledWebRuntime: false,
    plugins: {
      Keyboard: {
        resize: 'ionic', // 让Ionic处理布局调整，自带平滑过渡
        resizeOnFullScreen: true
      }
    }
  };
  
  export default config;
  

  这个配置会让Ionic自动跟随键盘的弹出/收起动画，调整页脚位置，无需额外编写过渡逻辑。

• 添加CSS过渡动画+监听键盘事件
  如果默认配置效果不佳，可以通过CSS过渡配合键盘事件实现自定义平滑移动：

  1. 给页脚添加过渡样式：

  ion-footer {
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  ion-footer.footer-raised {
    transform: translateY(-var(--keyboard-height));
  }
  

  2. 在组件中监听iOS专用的键盘事件（keyboardWillShow/keyboardWillHide比keyboardDidShow更早触发，能避免延迟）：

  import { Keyboard } from '@capacitor/keyboard';
  import { OnInit } from '@angular/core';
  
  export class ChatPage implements OnInit {
    ngOnInit() {
      Keyboard.addListener('keyboardWillShow', (info) => {
        document.documentElement.style.setProperty('--keyboard-height', `${info.keyboardHeight}px`);
        document.querySelector('ion-footer')?.classList.add('footer-raised');
      });
  
      Keyboard.addListener('keyboardWillHide', () => {
        document.querySelector('ion-footer')?.classList.remove('footer-raised');
      });
    }
  }
  

• 优化Ionic Content的键盘适配
  调整ion-content的属性，确保内容区域和页脚联动平滑：

  <ion-content scrollEvents="true" keyboardResize="ionic">
    <!-- 聊天消息列表 -->
  </ion-content>
  

  keyboardResize="ionic"会让Ionic动态调整内容高度，页脚会随着内容区域的变化自然平滑移动。

内容的提问来源于stack exchange，提问作者Nick Carlin