html - Angular 6动画不显示

Question

我正在尝试将动画微调器添加到我的 Angular 应用程序中

我找到了这个微调器:

https://codepen.io/z-/pen/OPzNLz

spinner.component.html

import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css'],
  animations: []
})
export class SpinnerComponent implements OnInit {

  constructor() {}

  ngOnInit() {}
}

/*Negative delay values skip rather than pause.*/

.test {
  background: yellow;
}

.row1 .left,
.row1 .right {
  animation-delay: -0s;
  /*Obviously not needed*/
}

.row2 .left,
.row2 .right {
  animation-delay: -0.5s;
}

.row3 .left,
.row3 .right {
  animation-delay: -1s;
}

.row4 .left,
.row4 .right {
  animation-delay: -1.5s;
}


/**/

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 84px;
}

.left,
.right {
  height: 6px;
  width: 90px;
  background-color: #000;
  border-radius: 10px;
  position: absolute;
}

.left {
  left: 0px;
  animation: left 2s infinite;
}

.right {
  right: 0px;
  animation: right 2s infinite;
}

.row1,
.row2,
.row3,
.row4 {
  position: relative;
}

.row1 {
  top: 0px;
}

.row2 {
  top: 26px;
}

.row3 {
  top: 52px;
}

.row4 {
  top: 78px;
}

@keyframes left {
  0%,
  50%,
  100% {
    width: 90px;
  }
  25% {
    width: 170px;
  }
  75% {
    width: 10px;
  }
}

@keyframes right {
  0%,
  50%,
  100% {
    width: 90px;
  }
  25% {
    width: 10px;
  }
  75% {
    width: 170px;
  }
}

<div class="test">Spinner</div>

<div class="loader">
  <div class="row1">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="row2">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="row3">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="row4">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

我获取了 HTML 和 CSS 文件，并将其复制为纯 html 和 css，然后出现了微调器。

然后我想为什么不将它用作 Angular 组件

所以我将代码复制到一个组件中，但是微调器似乎不起作用 它只是没有出现 - 没有错误。

我什至检查 BrowserAnimationsModule 是否导入到 app.module.ts 但它的剂量似乎发生了变化。

Answer 1

问题是注释，例如 css 中的/**/。