Angular 2/4如何确定在动画之前/之后放置内联的样式？

Question

我在Angular 4组件动画数组中有以下触发器:

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'))
]),

每个浏览器内联到元素的样式如下:

州0

IE 11 =>溢出:隐藏; min-width:0px; 背景颜色:黑色;

Chrome => background-color:black; -webkit-box-flex:0; flex:0 0 0px; 溢出:隐藏; min-width:0px;

Edge => flex:0 0 0px; 溢出:隐藏; min-width:0px; 背景颜色:黑色;

州1

IE 11 => min-width:450px; 背景颜色:蓝色;

Chrome => background-color:blue; -webkit-box-flex:1; flex:1 1 0px; 最小宽度:450px;

Edge => flex:1 1 0px; 最小宽度:450px; 背景颜色:蓝色;

我问这个是因为,你可能会说,我错过了IE中的关键风格,从而打破了布局.

编辑1)正如更新,我从来没有想通了算法究竟如何选择哪些样式放置内联,但finagling在触发状态的CSS,我能解决我的具体问题.我猜有时候会发出明目张胆的运气.

Answer 1

flex: '0 0 0',

这应该是

flex: '0 0 0px',

没有 px 这种风格就会被忽略