gpt4 book ai didi

angular - Angular 2动画结束回调函数的例子

转载 作者:太空狗 更新时间:2023-10-29 16:57:44 25 4
gpt4 key购买 nike

我正在尝试创建一个将在 Angular 2 中的动画结束时触发的函数(我使用的是最新的 angular cli)。

我一直在Angular Animations通过为触发器分配回调来了解如何实现这一点在我的代码示例中,我有一个动画到页面上的组件。代码如下:

//first.component.ts

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/core';


@Component({
selector: 'app-first',
templateUrl: './first.component.html',
styleUrls: ['./first.component.css'],
host: {
'[@routeAnimation]': 'true',
'[style.display]': "'block'",
'[style.position]': "'absolute'"
},
animations: [
trigger('routeAnimation', [
state('*', style({transform: 'translateX(0)', opacity: 1})),
transition('void => *', [style({transform: 'translateX(-100%)', opacity: 0}),animate(500)]),
transition('* => void', animate(500, style({transform: 'translateX(100%)', opacity: 0})))
])
]
})
export class FirstComponent implements OnInit {

constructor() { }

ngOnInit() {

}

myFunc() {
// call this function at the end of the animation.
}

}

html只是一个div

<div class="w9914420">
<h2>
first-component Works!
</h2>
</div>

老实说,我不太熟悉 JavaScript,所以任何帮助或快速示例都可以帮助我更好地理解 Angular 2。

最佳答案

这是工作示例:

import {Component, NgModule, Input, trigger, state, animate, transition, style, HostListener } from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
selector : 'toggle',
animations: [
trigger('toggle', [
state('true', style({ opacity: 1; color: 'red' })),
state('void', style({ opacity: 0; color: 'blue' })),
transition(':enter', animate('500ms ease-in-out')),
transition(':leave', animate('500ms ease-in-out'))
])
],
template: `
<div class="toggle" [@toggle]="show"
(@toggle.start)="animationStarted($event)"
(@toggle.done)="animationDone($event)"
*ngIf="show">
<ng-content></ng-content>
</div>`
})
export class Toggle {
@Input() show:boolean = true;
@HostListener('document:click')
onClick(){
this.show=!this.show;
}

animationStarted($event) {
console.log('Start');
}

animationDone($event) {
console.log('End');
}
}

@Component({
selector: 'my-app',
template: `
<div>
<toggle>Hey!</toggle>
</div>
`,
})
export class App {

}

@NgModule({
imports: [ BrowserModule ],
declarations: [ App, Toggle ],
bootstrap: [ App ]
})
export class AppModule {}

Plunker

关于angular - Angular 2动画结束回调函数的例子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40246853/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com