How does Angular 2/4 determine which styles to place inline prior/post an animation?

Question

I have the following trigger in an Angular 4 component animation array:

trigger('collection', [
  state('0', style({
    'background-color': 'black',
    '-webkit-box-flex': '0',
    '-ms-flex': '0 0 0px',
    flex: '0 0 0',
    overflow: 'hidden',
    'min-width': '0px',
  })),
  state('1', style({
    'background-color': 'blue',        
    '-webkit-box-flex': '1',
    '-ms-flex': '1 1 0px',
    flex: '1 1 0',
    'min-width': '450px',
  })),
  transition('0 => 1', animate('300ms ease-in')),
  transition('1 => 0', animate('300ms ease-out'))
]),

The styles that are added inline to the element per browser are as follows:

State 0

IE 11 => overflow: hidden; min-width: 0px; background-color: black;

Chrome => background-color: black; -webkit-box-flex: 0; flex: 0 0 0px; overflow: hidden; min-width: 0px;

Edge => flex:0 0 0px; overflow: hidden; min-width: 0px; background-color: black;

State 1

IE 11 => min-width: 450px; background-color: blue;

Chrome => background-color: blue; -webkit-box-flex: 1; flex: 1 1 0px; min-width: 450px;

Edge => flex:1 1 0px; min-width: 450px; background-color: blue;

I ask this because, as you can probably tell, I am missing critical styles in IE, thus breaking the layout.

Edit 1) Just as an update, I never figured out exactly how the algorithm chooses which styles to place inline, but by finagling the css in the trigger state, I was able to solve my specific problem. Blatant luck helps sometimes I guess.

score 2 · Answer 1 · answered Nov 07 '17 at 10:06

I don't know what are you trying to achieve from the code, But your question:

How does Angular 2/4 determine which styles to place inline prior/post an animation?

Please read about encapsulation properties, i.e. ViewEncapsulation, by default angular adds Shadow-Dom property to elements in components which makes two same elements in different components differentiate with each other, If you want to determine why your styles are not working in IE/edge, You should probably add this to your component configuration,

encapsulation: ViewEncapsulation.None

This will tell Angular that Please do not add your logic to keep the styles isolated inside the component Or you can also add Native property to let angular check that if the browser supports shadow-dom property then use ViewEncapsulation otherwise not,

encapsulation: ViewEncapsulation.Native

By default it is set to Emulated, This is the reason angular does not allow the styles defined for a component to reflect outside the scope of the component. Even if you give a generic styles to elements like

p {color: blue }

Angular will not allow it to modify elements present outside the component.

encapsulation: ViewEncapsulation.Emulated

That is the reason the styles are not shown in IE/Edge, as they might not support shadow-dom property. You can set this property to Native to see the effect.

Hope this helps ! Thank You.

This is good information, but I don't believe this is related to encapsulation. Edge, FF, and Chrome actually demonstrate correct functionality. IE is missing styles inline, which I suspect is causing problems. However, I don't know why IE is missing those styles, because I don't understand how the animation package decides what styles to insert inline. In the latest version of Angular (5), it actually threw errors for `'-webkit-box-flex': '1'` and `'-ms-flex': '1 1 0px'` in IE 11 (only IE 11 if I remember correctly), so I had to remove them altogether. — jpetitte, Nov 07 '17 at 19:45
Hi @jpetitte, My sincerest apologies i couldn't resolve your problem, Please let me know when you find a solution by answering your own question unless correctly answered by experts ! Thank You — SHOHIL SETHIA, Nov 08 '17 at 10:04

score 0 · Answer 2 · answered Nov 07 '17 at 09:29

0

flex: '0 0 0',

this should be

flex: '0 0 0px',

without px this style just got ignore

answered Nov 07 '17 at 09:29

Ravin Singh D

904
10
19

Hi Ravin. The style "-ms-flex: 1 1 0px" came directly from autoprefixer (though it looks like this has changed in a recent update). 'flex: 0 0 0px' is what was inserted into document by Angular, so I have no control over that. I just copy/pasted the output by Angular. – jpetitte Nov 07 '17 at 19:38
@jpetitte in your code example you mention flex:0 0 0. is that format you have in your source code, or you have as flex: 0 0 0px – Ravin Singh D Nov 08 '17 at 03:09
I have flex: 0 0 0 in my source, which is another example of the lack of understanding regarding this system. That value is being translated (as far as I can tell) to 0 0 0px. – jpetitte Nov 08 '17 at 18:54

How does Angular 2/4 determine which styles to place inline prior/post an animation?

2 Answers2