Question

我的代码的这一部分出了问题。这是我的主页组件页面。当我取出动画部分时，我的应用程序运行正常。

      @Component({
     selector: 'app-home',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.scss'],


     animations: [trigger('goals', [
     transition('* => *', [
    query(':enter', style({ opacity: 0 }), {optional: true}),
    query(':enter', stagger('300ms', [
      animate('.6s ease-in', keyframes([
        style({opacity: 0, transform: 'translateY(-75%)', offset: 0}),
        style({opacity: .5, transform: 'translateY(35px)',  offset: 0.3}),
        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0}),
      ]))]), {optional: true})
  ])
])

 ]
 })

这是我的主页HTML，在将HTML动画部分添加到home组件之前，该HTML效果很好。

<div class="container color-dark">
<div class="col">
<p> Add a bucket list item</p>
</div>
<div class="col">
<p> Your bucket list ({{itemCount}})</p>
</div>
</div>
<div class="container color-light" [@goals]="goals.length">
<div class="col">
<p class="sm"> Use this form below to add a new bucket list goal.</p>
<form>
 <input type ="text" class="txt" name="item" placeholder="Life goal.."       [(ngModel)]="goalText">
 <br> <span>{{ goalText }}</span>
 <input type ="submit" class= "btn" [value]="btnText"(click)="addItem()">
 </form>
 </div>
<div class="col">
<p class="life-container" *ngFor="let goal of goals">
  {{goal}}

如何摆脱Angular App的控制台中不支持“ validateStyleProperty”的控制台错误？

0 个答案: