首页 文章

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

提问于
浏览 次
6

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

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

State 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;背景颜色：黑色;

State 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）就像更新一样，我从未弄清楚算法究竟如何选择内联的样式，但是通过在触发状态下完成css，我能够解决我的具体问题 . 我猜有时候会发出明目张胆的运气 .

css angular internet-explorer angular-animations

2 回答

  • 0

    我不知道你想从代码中实现什么，但你的问题是：

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

    请阅读 encapsulation 属性，即 ViewEncapsulation ，默认情况下，将 Shadow-Dom 属性添加到组件中的元素，这使得不同组件中的两个相同元素相互区分，如果要确定样式在 IE/edge 中不起作用的原因，您应该添加这对你的组件配置，

    encapsulation: ViewEncapsulation.None

    这将告诉Angular Please do not add your logic to keep the styles isolated inside the component 或者你也可以添加 Native 属性让角度检查如果浏览器支持 shadow-dom 属性然后使用 ViewEncapsulation 否则不行，

    encapsulation: ViewEncapsulation.Native

    默认情况下，它设置为 Emulated ，这是angular不允许为组件定义的样式反映在组件范围之外的原因 . 即使你给类似的元素提供泛型样式

    p {color: blue }

    Angular不允许它修改组件外部的元素 .

    encapsulation: ViewEncapsulation.Emulated

    这就是IE / Edge中未显示样式的原因，因为它们可能不支持 shadow-dom 属性 . 您可以将此属性设置为 Native 以查看效果 .

    希望这可以帮助 ！谢谢 .

    回复于
  • 2
    flex: '0 0 0',

    这应该是

    flex: '0 0 0px',

    没有px这种风格只是被忽略了

    回复于

相关问题