I am working on a single-page Angular 4.3.1 application that utilizes the <router-outlet> tag for component rendering.
The problem I am facing is that the component is rendered within an enclosing element named: <ng-component> (when no selector is specified).
This becomes problematic when I set the opacity of the wrapper element, as it does not affect the child elements. This behavior seems to be due to the fact that the wrapper is a custom DOM element.
Here is an example:
<!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>I am using Chrome version 59.0.3071.115, which is currently the latest version available.
For reference, here is a screenshot in case the issue is specific to my environment:
https://i.sstatic.net/znMtZ.jpg
I also tested this in IE11 and found that the opacity worked fine there. Is anyone else encountering this issue?
Update
As requested, here is the Angular routing animation that I am trying to implement successfully in Chrome:
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]': '' }
})