CODEWITHSUNDEEP
javascriptangularjs
Pravissimo
Pravissimo

Reputation: 145

Animate element on page load in Angular 2

I'm doing an app for a job interview. I'm kinda stuck at one point where I want to animate my background image on page load. I'm trying to achive this using angular 2 animations (which I'm trying to learn BTW)

Animation should expand image from right to left, from 0px width state to 308px width state immidietly on page ready. (when someone enters the application)

I've managed to do that on click but, it's not what it's supposed to do.

The code I've created so far is:

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')
    }
}

and html for that is 

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

Hope you guys can help me. I will answer all the questions.

cheers

Upvotes: 3

Views: 11457

Answers (3)

kittycatbytes
kittycatbytes

Reputation: 1053

This is the answer:

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';
    }

}

Template:

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

A little late for your interview, but hopefully others will find this helpful.

I have also create a plunker with an alternate example to see it in use: Angular Animate on Load

Upvotes: 3

Tim Consolazio
Tim Consolazio

Reputation: 4888

You could also just use animate.css (which bundles very straightforwardly into your css.bundle.js, if you do that sort of thing). You apply the two classes as either class or ngClass values, "animated whateverAnimationYouWant". There's flips, bounces, zooms, slides, cartwheels, rubber banding, you name it.

It just works and it's super easy.

Example, I want the splash banner to bounce in whenever the home page loads. 

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

app-splashimage is a component that loads in a series of images, selected randomly. To animate it, all you do is add those classes.

Now say you want to do it conditionally, I don't know, if a value is true, bounce, otherwise, rubber band. 

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

Don't like loading up your markup with conditionals? Make it the result of a function in your controller:

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

As far as I know, the angular animations are based on animate.css (pretty sure it says that in the npm package docs, it used to anyway).

You can see a lot of this stuff at work in www.recruiterater.com

Note: I get this may not jibe with the "angular way or no way" mindset, but it is a very practical way to get the job done, the CSS file bundles straighforwardly, and you can test the applied classes the usual jasmine way (you can use ViewChild.nativeElement, etc). It also works in everything, very portable. You won't have to worry whether or not you have to rebuild your animations in Angular 4.

Upvotes: 0

Martin Cremer
Martin Cremer

Reputation: 5572

Try something like this:

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>

Instead of animating width, i'd animate transform: scaleX, since it's much smoother due to gpu support. scaleX(1) is default, so there's no need to mention it as target style.

Upvotes: 3

Related Questions