Angular 2 - css transition on element with ngStyle

Question

I can't make my css transition working when the property to be updated is bind with [ngStyle] or [style.property]

HTML :

<div class="bar" [style.width]="size +'%'"></div>

CSS :

.bar{ width:0; transition: width .5s ease-out; }

JS : size is correctly updated...

To be sure, if i remove the style binding in html and update the width on :hover, transition is working. Do i miss something?

If i let the [style.width] binding and hover it for ex. with a width : 50%!important, transition works. Even though it's not what i want to achieve, it looks like ngStyle block the transitions. And !important is required.

But this is not working either :

[ngStyle]="{'width': size +'% !important'}"

micronyks · Accepted Answer · 2016-10-11 09:29:01Z

1

with this setup, you have to delay binding of size variable,

export class AppComponent{

  constructor(){
     setTimeout(()=>{
        this.size=20;
     },1000)
  }

}

answered Oct 11, 2016 at 9:29

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

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

5 Comments

sebap Over a year ago

Ok, transition works on this specific case with your solution. But size in my case is calculated from 2 params inside a bigger object. When i delay the setting of this bigger object it doesn't work. If i set a new property 'percent' for each child on a timeout, transition starts from 0 on each update...

micronyks Over a year ago

But just wrap size variable within settimeout.

micronyks Over a year ago

Else you have to use angular2 animation.

sebap Over a year ago

Thank you. Well, this is not really handy. Don't understand why it doesn't work on the first place... updating a css property with a transition on it should be straight forward

micronyks Over a year ago

THat's because angular2 bindings get resolved first and then css gets applied to dom element. so binding first and then css that's the problem. use angular2 animation or you have to delay binding that's it.

Collectives™ on Stack Overflow

Angular 2 - css transition on element with ngStyle

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related