Ionic 4 微调器动画

Question

我似乎可以弄清楚为什么 ionic 4 旋转器在旋转时不遵守其边界，我正在使用 android version 8.0.0

Ionic:

   ionic (Ionic CLI)             : 4.11.0 (/home/yushin/.nvm/versions/node/v11.9.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.3.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 20 other plugins)

System:

   Android SDK Tools : 26.1.1 (/home/yushin/Android/Sdk)
   NodeJS            : v11.9.0 (/home/yushin/.nvm/versions/node/v11.9.0/bin/node)
   npm               : 6.8.0
   OS                : Linux 4.13

Answer 1

我遇到了与 Android 加载程序相同的问题。理想情况下，ion-spinner 的 CSS 应该更新为：

:host(.spinner-crescent) svg {
    transform-origin: 40% 40%!important;
}

但是，由于 Ionic 4 现在使用阴影 dom，您将无法从外部将其应用于组件。

我找到的解决方案是使用替代微调器（例如圆圈）。

let loading = await this.loadingController.create({
    message: message,
    spinner: 'circles'
});
await loading.present();

Ionic 4 微调器动画

Ionic 4 spinner animation

android

sass

ionic-framework

ionic4