我有一个使用Angular 4.3.1编写的单页应用程序,它使用
问题在于,如果没有选择器,组件将被呈现为带有封装元素
因此,当我对包装器应用不透明度时,子元素不受影响。这似乎是因为包装器是自定义DOM元素。
以下是示例:
<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]': '' }
})