Question

我在Angular中有一个div，我试图在页面加载时淡入，

我已经看过许多教程，但是尽管没有错误，但是似乎都没有用。

http://jsfiddle.net/r89ud4ez/ 该应用当前的外观是这样的，目标是使CLI div在页面加载时逐渐消失，

这是我的组件

import { Component, Input, OnChanges } from '@angular/core';
import { animation, animate, trigger, state, style, transition  } from '@angular/animations';
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({
  selector: 'app-intro-cmd-line',
  templateUrl: './intro-cmd-line.component.html',
  styleUrls: ['./intro-cmd-line.component.css'],
  animations: [
    // the fade-in/fade-out animation.
    trigger('fadeIn', [

      // the "out" style determines the "resting" state of the element when it is visible.
      state('out', style({opacity: 0})),
      // in state
      state('in', style({opacity: 1})),

      transition('out => in', animate('100ms ease-in')),
      transition('in => out', animate('100ms ease-in')),
    ])
  ]
})

export class IntroCmdLineComponent {
state = 'out';
toggleState() {
  this.state = this .state === 'out' ? 'in' : 'out';
}
}

是的，我的module.ts导入了BrowserModuleAnimations，所以我不完全确定为什么它不能正常工作，使用代码，由于我有触发器，我希望我的div以0透明度开始设置在容器div中。

请帮助

Answer 1

我解决了我的问题，不确定是否能完全理解，但是我认为我的动画太短了，以至于看不到它的“淡入淡出”，

错误的第一件事是<div id="container" [@fadeIn]='out'>，我需要将“ out”更改为状态变量的名称，

这是我的最后一个内容，以防万一没人知道为什么他们的动画无法正常工作

@Component({
  selector: 'app-intro-cmd-line',
  templateUrl: './intro-cmd-line.component.html',
  styleUrls: ['./intro-cmd-line.component.css'],
  animations: [
    // the fade-in/fade-out animation.
    trigger('fadeIn', [

      // the "out" style determines the "resting" state of the element when it is visible.
      state('out', style({opacity: 0})),
      // in state
      state('in', style({opacity: 1})),

      transition('out => in', animate('1000ms ease-in')),
    ])
  ]
})

export class IntroCmdLineComponent implements AfterViewInit {
state = 'out';

ngAfterViewInit() {
  this.state = this.state === 'in' ? 'out' : 'in';
}

在启动时淡入动画

1 个答案: