我正在尝试在本机脚本角度上实现火花动画。 我将缩略图图像用作图标，并且试图在用户单击这些图像时进行火花动画。

这是我使用的参考链接：Link

我的HTML代码非常简单。我有一个StackLayout里面有一个图像。 我在图像上添加了一个称为魔术的类。但是不知道为什么。它不起作用。

<StackLayout width="100%" orientation="vertical" row="0" col="0" verticalAlignment="center" class="abcd" >
    <Image #targetots
        [src]="imgSrc"
        class="magic" height="30" width="40"></Image>
    <Label  text="TextHere" horizontalAlignment="center"></Label>
</StackLayout>

我做了所有类似参考链接中的操作。 我对Nativescript很陌生。如果无法通过这种方式完成火花动画，请告诉我是否还有其他方法

我的package.json

{
  "nativescript": {
    "id": "org.nativescript.anima","tns-android": {
      "version": "6.2.0"
    },"tns-ios": {
      "version": "6.2.0"
    }
  },"description": "NativeScript Application","license": "SEE LICENSE IN <your-license-filename>","repository": "<fill-your-repository-here>","dependencies": {
    "@angular/animations": "~8.2.0","@angular/common": "~8.2.0","@angular/compiler": "~8.2.0","@angular/core": "~8.2.0","@angular/forms": "~8.2.0","@angular/platform-browser": "~8.2.0","@angular/platform-browser-dynamic": "~8.2.0","@angular/router": "~8.2.0","@nativescript/theme": "~2.2.0","nativescript-angular": "~8.20.0","nativescript-fontawesome": "^1.0.0","reflect-metadata": "~0.1.12","rxjs": "^6.4.0","tns-core-modules": "~6.2.0","zone.js": "~0.9.1"
  },"devDependencies": {
    "@angular/compiler-cli": "~8.2.0","@ngtools/webpack": "~8.2.0","nativescript-dev-webpack": "~1.3.0","node-sass": "^4.13.0","typescript": "~3.5.3"
  },"gitHead": "a6fec076a20f898feabb4466a2c411158c18a100","readme": "NativeScript Application"
}

CSS代码

.magic {
  display:inline-block;
  margin:50px;
  position:relative;
}


.magic Image{
  color:orange;
  filter:grayscale(100%);
}
.magic:hover i{
  animation:change 1s forwards;
}


@keyframes change{
  50% {
    transform:scale(0);
  filter:grayscale(100%);
  }
  51% {
    filter:grayscale(0%);
  }
  100% {
    transform:scale(1);
    filter:grayscale(0%);
  }
}


.magic:before {
  content:"";
  position:absolute;
  top:calc(50% - 45px);
  left:calc(50% - 45px);
  width:90px;
  height:90px;
  border-radius:50%;
  border-color:orange;
  border-style:solid;
  border-width:45px;
  transform:scale(0);
  box-sizing:border-box;
}

.magic:hover::before {
  border-width:0;
  transform:scale(1);
  transition:
    transform 0.5s,border-width 0.5s 0.5s;
}



.magic::after,.magic Image::after{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  left:calc(50% - 80px);
  top:calc(50% - 80px);
  background:
    //4 reds
    radial-gradient(circle,red 50%,transparent 60%),radial-gradient(circle,//4 oranges
    radial-gradient(circle,orange 50%,transparent 60%); 

  background-size:16px 16px; 
  background-position:
    calc(50% - 50px) calc(50% - 50px),calc(50% + 50px) calc(50% - 50px),calc(50% - 50px) calc(50% + 50px),calc(50% + 50px) calc(50% + 50px),calc(50% +  0px) calc(50% + 70px),calc(50% + 70px) calc(50% +  0px),calc(50% - 70px) calc(50% +  0px),calc(50% +  0px) calc(50% - 70px);
  background-repeat:no-repeat;
  border-radius:50%;
  transform:scale(0);
}
.magic Image::after {
  background-size:10px 10px;
  transform:rotate(10deg) scale(0);
}

.magic:hover:after {
  transform:scale(1);
  opacity:0;
  background-size:0 0;
  transition:transform 0.5s 0.5s,opacity 0.4s 0.9s,background-size 0.5s 0.9s;
}
.magic:hover i:after {
  transform:rotate(10deg) scale(1);
  opacity:0;
  background-size:0 0;
  transition:transform 0.5s 0.5s,background-size 0.5s 0.9s;
}

这是 stackblitz demo