I have a single page Angular 4.3.1 app that uses the <router-outlet> tag to render components.
The issue is that the component is rendered with an encapsulating element called: <ng-component> (if no selector is present).
So the issue is when I apply opacity to the wrapper the child elements are not effected. It seems as if it's because 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'm using chrome version 59.0.3071.115 which seems to be the latest version right now.
Also here is a screenshot in case the problem is only on my end:
I tested the same thing in IE11 but the opacity was fine there. Anyone else experiencing this?
Update
Upon request, here is the angular routing animation I'm trying to get working on 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]': '' }
})