css - 如何为动画设置离子菜单过渡效果

Question

我是离子新手。我第一次开发离子应用程序。我已经尝试了很多方法来将过渡 CSS 属性应用于 ion-menu，但是它对我不起作用。谁能帮我？

我使用 CSS 尝试了 DOM 中的样式 shadow-root 元素。在我的 app.component.ts 文件中：

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.menuAnimation(); // call menuRadius method
    });
  }
  menuAnimation() {
    setTimeout(() => {
      document.querySelector('ion-menu').shadowRoot.querySelector('.menu-inner').setAttribute('style', 'transition: 5s');
    }, 2000);
  }