Angular 2 animate - changing element attribute

Question

The angular 2 animate documentation is very poor, so I started playing with it and decided to make some nice animation like fading, between 2 images.

My current image has the animation trigger all set up:

<img src="myimage.png" class="img img-responsive"
            [@travelState]="travelState"
            >

animations: [
    trigger('travelState', [
      state('inactive', style({

      })),
      state('active',   style({
//Change image src
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]

Now, switching between inactive state and active state has to change the image src attribute to another image, with fading transition. How I can change the src image attribute when the image triggers active state?

Community · Accepted Answer · 2017-05-23 12:09:51Z

1

Angular 2 animations are built on top of the W3C's CSS3 transitions API. As you can see from their list of animatable properties, you cannot animate the src property.

You can, however, achieve essentially the same effect by layering both images on top of each other (see here if you need help doing that) and animating the opacity of whichever image is on top.

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Aug 26, 2016 at 16:00

ABabin

2,93727 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Günter Zöchbauer · Accepted Answer · 2016-08-26 09:48:01Z

0

Sounds like you want to use the onDone callback that will be included in RC.6

https://github.com/angular/angular/issues/10304

answered Aug 26, 2016 at 9:48

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

2 Comments

TheUnreal Over a year ago

Cool, thanks. So until then I can apply only CSS styles such as backgroundImage to an animation state?

Günter Zöchbauer Over a year ago

I haven't used animation myself yet and have actually no idea what you're talking about :D I just remembered seeing this issue and related PR and got the impression this is related.

Collectives™ on Stack Overflow

Angular 2 animate - changing element attribute

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related