Unable to set router opacity for animation [Chrome]
I have an Angular 4.3.1 single page app that uses a tag <router-outlet>
to render components.
The problem is that the component is rendered with an encapsulating element: <ng-component>
(if no selector is present).
So the problem is that I am applying opacity to the wrapper when the children are not executed. It seems to be because the wrapper is a custom DOM element.
Here's 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 the latest version now.
Also here is a screenshot if the problem is only at my end:
I tested the same thing in IE11 but the opacity was good there. Is anyone else experiencing this?
Update
As requested, here's the Angular routing animation I'm trying to work with 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]': '' }
})
source to share
You can insert a block <style></style>
inside <ng-component></ng-component>
. In your case:
<style>
ng-component > div {opacity: 0.2;}
</style>
Here's the complete snippet:
<!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>
It works on my version of Chrome (version 59.0.3071.115)
source to share
Another way, without any manual changes in the body tag of your question.
<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>
I am implementing it
jQuery
, but if you don't want to use itjQuery
in your project, you can rewrite itJavaScript
.
source to share