无法为动画设置router-outlet的不透明度[Chrome]

Question

无法为动画设置router-outlet的不透明度[Chrome]

cssangulargoogle-chrome

3

我有一个使用Angular 4.3.1编写的单页应用程序，它使用<router-outlet>标签来呈现组件。

问题在于，如果没有选择器，组件将被呈现为带有封装元素<ng-component>的形式。

因此，当我对包装器应用不透明度时，子元素不受影响。这似乎是因为包装器是自定义DOM元素。

以下是示例：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <ng-component style="opacity: 0.2;">
    <div>First Line</div>
    <div>Second Line</div>
    <div>Third Line</div>
  </ng-component>

  <div style="opacity: 0.2;">
    <div>First Line</div>
    <div>Second Line</div>
    <div>Third Line</div>
  </div>
</body>

</html>

我正在使用的是chrome 59.0.3071.115版本，这似乎是目前最新的版本。

如果问题只出现在我这里，这里还有一张截图：

我在IE11中测试了同样的内容，但不透明度那里没问题。还有其他人遇到了这个问题吗？

更新

应请求，这里是我正在尝试在Chrome上运行的angular路由动画：

export const routerAnimation =
    trigger('routerAnimation', [
        transition(':enter', [

            // styles at start of transition
            style({ opacity: 0 }),

            // animation and styles at end of transition
            animate('0.3s', style({ opacity: 1 }))
        ]),
    ])

@Component({
    selector: '...',
    templateUrl: '...',
    styleUrls: ['...'],
    animations: [routerAnimation],
    host: { '[@routerAnimation]': '' }
})

- Sal

如果其他人确实遇到了这个问题，任何解决方法都将不胜感激。 - Sal

2个回答

0

另一种方法是在不需要手动更改问题主体标签的情况下完成。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script>
  $(function(){
     $('ng-component').each(function(){$(this).children().attr('style',$(this).attr('style'));});
   });
</script>
</head>
<body>
  <ng-component style="opacity: 0.2;">
    <div>First Line</div>
    <div>Second Line</div>
    <div>Third Line</div>
  </ng-component>
</body>
</html>

我使用 jQuery 实现它，但如果您不想在项目中使用 jQuery，您可以通过 JavaScript 重新编写它。

- Ramin Bateni

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ivan · Accepted Answer

你可以在<ng-component></ng-component>中嵌套一个<style></style>块。针对你的情况：

<style>
    ng-component > div {opacity: 0.2;}
</style>

这是完整的代码片段：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <ng-component>
  
      <style>
        ng-component > div {opacity: 0.2;}
      </style>      
  
      <div>First Line</div>
      <div>Second Line</div>
      <div>Third Line</div>
  </ng-component>

  <div style="opacity: 0.2;">
    <div>First Line</div>
    <div>Second Line</div>
    <div>Third Line</div>
  </div>
</body>

</html>

它在我的Chrome版本上运行正常（版本号为59.0.3071.115）。