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);
  }
}

离子制造按钮动画问题

1 个答案: