时间戳

首页 > 解决方案 > Angular 6动画不显示

html - Angular 6动画不显示

问题描述

我试图将动画微调器添加到我的角度应用程序

我找到了这个微调器：

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 中，然后微调器出现了。

然后我想为什么不将它用作角度的组件

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

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

标签： htmlcssangularanimation

解决方案

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

推荐阅读