我在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 回答
我解决了我的问题,不确定我是否完全理解这一点,但我认为我的动画很短暂,我看不到它“淡入”,
首先出错的是
<div id="container" [@fadeIn]='out'>
我需要将'out'更改为我的状态变量的名称,这是我的最后一个组件,万一有人无法弄清楚为什么他们的动画不会工作