ionic4 - 添加自定义加载动画Ionic 4

Question

我想使用GIF或SVG动画为ionic 4应用程序创建自定义加载微调器。没有用HTML填充的“content”属性，因此在这种情况下如何用自定义SVG或GIF替换气泡SVG？

async presentLoading() {
    const loading = await this.loadingController.create({
    spinner: 'bubbles',
    duration: 2000
    });
return await loading.present();
}

Answer 1

作为ionic V4的官方文档，它不可能。但是您可以通过CSS使用技巧。

在<ion-img>标记的allert intead的消息 key 内使用<img/>标记

const loading = await this.loadingController.create({
      message: '<ion-img src="/assets/svg/shopping.svg" alt="loading..."></ion-img>',
      cssClass: 'scale-down-center',
      translucent: true,
      showBackdrop: false,
      spinner: null,
      duration: 2000
    });

创建自定义关键帧，您也可以使用此关键帧来生成自己的动画。

// CUSTOM ANIMATION KEYFRAMS********************
 @-webkit-keyframes scale-down-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
@keyframes scale-down-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
// CUSTOM ANIMATION KEYFRAMS********************

创建自定义类

.scale-down-center {
    -webkit-animation: scale-down-center 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) infinite alternate both;
            animation: scale-down-center 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) infinite alternate both;
 }