在启动时淡入动画

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

我已经遵循了许多教程,但它们似乎都没有工作,虽然我没有错误..

http://jsfiddle.net/r89ud4ez/这就是app当前的样子,目标是让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 ..

请帮忙,

回答(1)

3 years ago

我解决了我的问题,不确定我是否完全理解这一点,但我认为我的动画很短暂,我看不到它“淡入”,

首先出错的是 <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';
}