Javascript 在Angular 2中为页面加载上的元素设置动画

我正在做一个求职面试的应用程序。 我有点想在页面加载时设置背景图像的动画。 我正试图通过angular 2动画实现这一点（顺便说一句，我正试图学习）

动画应该从右到左展开图像，从0px宽度状态快速扩展到308px宽度状态。（当有人进入应用程序时）

我在点击时就做到了，但这不是它应该做的

到目前为止，我创建的代码是：

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

@Component({
    selector: 'left-panel',
    templateUrl: "./left-panel.component.html",
    styleUrls: ['./left-panel.component.scss'],
    animations: [
        trigger('bgImgTrigger', [
            state('none', style({
                width: '10px'
            })),
            state('maximum', style({
                width: '308px'
            })),
            transition('none => maximum', animate('100ms'))
        ])
    ]
})

export class LeftPanelComponent {
    state:string = 'none';

    toggleState() {
        this.state = (this.state === 'none' ? 'maximum': 'none')
    }
}

而html就是这样

<div class="bg-image" [@bgImgTrigger]='state' (click)="toggleState()"></div>

希望你们能帮助我。 我会回答所有的问题

---

干杯

试试这样：

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

@Component({
    selector: 'left-panel',
    templateUrl: "./left-panel.component.html",
    styleUrls: ['./left-panel.component.scss'],
    animations: [
            trigger('bgImgTrigger', [
                transition(':enter', [style({transform: 'scaleX(0)'}), animate('100ms'))]
            ])
    ]
})
export class LeftPanelComponent {}

html:

我没有设置宽度的动画，而是设置transform:scaleX的动画，因为它由于gpu支持而更加平滑。

---

scaleX（1）是默认的，因此无需将其作为目标样式提及。

尝试以下方法：

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

@Component({
    selector: 'left-panel',
    templateUrl: "./left-panel.component.html",
    styleUrls: ['./left-panel.component.scss'],
    animations: [
            trigger('bgImgTrigger', [
                transition(':enter', [style({transform: 'scaleX(0)'}), animate('100ms'))]
            ])
    ]
})
export class LeftPanelComponent {}

html:

我没有设置宽度的动画，而是设置transform:scaleX的动画，因为它由于gpu支持而更加平滑。

---

scaleX（1）是默认的，因此无需将其作为目标样式提及。

您也可以使用animate.css（如果您这样做，它会非常直接地绑定到您的css.bundle.js中）。您可以将这两个类应用为class或ngClass值，“动画任意动画”。有翻转、弹跳、缩放、幻灯片、车轮、橡皮筋等等

它只是工作，而且非常简单

例如，我希望每当主页加载时，飞溅的横幅就会弹进来

<div class="animated bounceInDown">
    <app-splashimage></app-splashimage>
</div>

注意：我知道这可能不符合“有角度的方式或没有方式”的思维方式，但这是完成工作的一种非常实用的方式，CSS文件横向捆绑，您可以使用常见的jasmine方式测试应用类（您可以使用ViewChild.nativeElement等）。它也适用于任何东西，非常便携。您不必担心是否需要在Angular 4中重建动画
 您也可以只使用animate.css（如果您这样做的话，它可以非常直接地绑定到您的css.bundle.js中）。您可以将这两个类应用为class或ngClass值，“动画任意动画”。有翻转、弹跳、缩放、幻灯片、车轮、橡皮筋等等

它只是工作，而且非常简单

例如，我希望每当主页加载时，飞溅的横幅就会弹进来

<div class="animated bounceInDown">
    <app-splashimage></app-splashimage>
</div>



注意：我知道这可能不符合“有角度的方式或没有方式”的思维方式，但这是完成工作的一种非常实用的方式，CSS文件横向捆绑，您可以使用常见的jasmine方式测试应用类（您可以使用ViewChild.nativeElement等）。它也适用于任何东西，非常便携。您不必担心是否需要在Angular 4中重建动画
 这就是答案：

import {Component, AfterViewInit, trigger, state, style, transition, animate, keyframes} from "@angular/core";

@Component({
    selector: 'left-panel',
    templateUrl: "./left-panel.component.html",
    styleUrls: ['./left-panel.component.scss'],
    animations: [
        trigger('bgImgTrigger', [
            state('none, void', style({
                width: '10px'
            })),
            state('maximum', style({
                width: '308px'
            })),
            transition('none => maximum', animate('100ms'))
        ])
    ]
})

export class LeftPanelComponent implements AfterViewInit {
    state:string = 'none';

    ngAfterViewInit() {
        this.state = 'maximum';
    }

}

模板：

<div class="bg-image" [@bgImgTrigger]='state'></div>



面试有点晚了，但希望其他人会觉得这很有帮助

我还创建了一个plunker，用另一个示例查看它的使用情况：
答案如下：

import {Component, AfterViewInit, trigger, state, style, transition, animate, keyframes} from "@angular/core";

@Component({
    selector: 'left-panel',
    templateUrl: "./left-panel.component.html",
    styleUrls: ['./left-panel.component.scss'],
    animations: [
        trigger('bgImgTrigger', [
            state('none, void', style({
                width: '10px'
            })),
            state('maximum', style({
                width: '308px'
            })),
            transition('none => maximum', animate('100ms'))
        ])
    ]
})

export class LeftPanelComponent implements AfterViewInit {
    state:string = 'none';

    ngAfterViewInit() {
        this.state = 'maximum';
    }

}

模板：

<div class="bg-image" [@bgImgTrigger]='state'></div>



面试有点晚了，但希望其他人会觉得这很有帮助

我还创建了一个plunker，并提供了另一个示例来查看它的使用情况：