要实现Angular 2动画中的布尔触发器,您需要使用Angular的动画模块和触发器。以下是一个示例解决方案,包含代码示例:
npm install @angular/animations --save
import { Component, OnInit } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css'],
animations: [
trigger('myTrigger', [
state('true', style({
opacity: 1,
transform: 'translateX(0)'
})),
state('false', style({
opacity: 0,
transform: 'translateX(-100%)'
})),
transition('true <=> false', animate('500ms ease-in-out'))
])
]
})
export class MyComponentComponent implements OnInit {
isTriggered = false;
constructor() { }
ngOnInit() {
}
}
在上面的代码中,我们定义了一个名为myTrigger
的触发器。它有两个状态:true
和false
。在true
状态下,元素的透明度为1,水平位移为0。在false
状态下,元素的透明度为0,水平位移为-100%。然后,我们定义了一个状态之间的转换,使用transition
函数指定转换的持续时间为500毫秒,缓动函数为ease-in-out
。
Hello, World!
在上面的代码中,我们使用方括号语法将触发器绑定到div
元素上。我们将isTriggered
变量转换为字符串,并将其作为触发器的输入。
isTriggered
变量的值来触发动画:triggerAnimation() {
this.isTriggered = !this.isTriggered;
}
在上面的代码中,我们定义了一个名为triggerAnimation
的方法,它会将isTriggered
变量的值取反,从而触发动画。
现在,当您调用triggerAnimation
方法时,将触发动画,并根据isTriggered
变量的值在true
和false
状态之间切换。