css - Ionic fab 按钮动画问题

Question

我在我的移动应用程序中使用 Ionic-3，我尝试添加这个 example按钮和动画工作正常，但 box shadow 不工作。我该如何解决这个问题

这是我的代码CSS

ion-fab[bottom] {
  bottom: 94px;
}
.fab-md-danger {
  color: #fff;
  background-color: #488aff;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(#5a99d4, .5);
  -webkit-animation: pulse 1.5s infinite;
}
.fab-md-danger.activated {
  color: #fff;
  background-color: #a7c6fd;
}


@-webkit-keyframes pulse {
  0% {
    @include transform(scale(.9));
  }
  70% {
    @include transform(scale(1));
    box-shadow: 0 0 0 50px rgba(#5a99d4, 0);
  }
  100% {
    @include transform(scale(.9));
    box-shadow: 0 0 0 0 rgba(#5a99d4, 0);
  }
}

html

<ion-fab right bottom>
  <button ion-fab color="danger" >
    <ion-icon name="camera"></ion-icon>

  </button>
</ion-fab>

我的例子 https://stackblitz.com/edit/ionic-lenkie?file=pages%2Fhome%2Fhome.scss

Answer 1

只需删除所有 @include transform(...)。因为您要导入一个未定义的函数(transform)。

@-webkit-keyframes pulse { 
  70% { 
    box-shadow: 0 0 0 50px rgba(#5a99d4, 0);
  }
  100% { 
    box-shadow: 0 0 0 0 rgba(#5a99d4, 0);
  }
}