Question

我正在为求职面试做一个应用程序。我有点卡在我想在页面加载上为我的背景图像制作动画的地方。我正在尝试使用角度2动画（我正在尝试学习BTW）来实现这一点。

动画应该在页面就绪时从右向左扩展图像，从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>

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

欢呼声

Answer 1

这就是答案：

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来查看它的使用情况：Angular Animate on Load

Answer 2

尝试这样的事情：

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：

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

不是动画宽度，而是动画变换：scaleX，因为它支持gpu，因此更加平滑。 scaleX（1）是默认值，因此无需将其作为目标样式提及。

Answer 3

你也可以使用animate.css（如果你做那种事情，它会非常直接地捆绑到你的css.bundle.js中）。您将这两个类应用为class或ngClass值，“animated whateverAnimationYouWant”。有翻转，弹跳，变焦，滑动，车轮，橡皮筋，你的名字。

它只是有效，而且非常简单。

示例，我希望每当主页加载时，启动横幅就会反弹。

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

app-splashimage是一个加载一系列图像的组件，随机选择。要为它设置动画，您只需添加这些类。

现在说你想有条件地做，我不知道，如果值是真的，反弹，否则，橡皮筋。

<div [ngClass]="someVal ? 'animated bounceInDown' : 'animated rubberBand'">
     <app-splashimage></app-splashimage>
</div>

不喜欢用条件加载你的标记？将它作为控制器中函数的结果：

<div [ngClass]="computeAnimationClass ( )">
     <app-splashimage></app-splashimage>
</div>

据我所知，角度动画基于animate.css（非常确定它说在npm包文档中，无论如何都是如此）。

你可以在www.recruiterater.com

中看到很多这样的东西在起作用

注意：我认为这可能不符合“有角度的方式或没有办法”的心态，但这是一种非常实用的方式来完成工作，CSS文件捆绑得很直接，你可以通常测试应用的类jasmine方式（可以使用ViewChild.nativeElement等）。它也适用于所有东西，非常便携。您无需担心是否必须在Angular 4中重建动画。

Angular 2中页面加载时的Animate元素

3 个答案: