gpt4 book ai didi

css - 无法为动画设置路由器导出的不透明度 [Chrome]

转载 作者:太空狗 更新时间:2023-10-29 18:20:01 24 4
gpt4 key购买 nike

我有一个使用 <router-outlet> 的单页 Angular 4.3.1 应用程序标记以呈现组件。

问题在于组件是使用名为:<ng-component> 的封装元素呈现的。 (如果没有选择器)。

所以问题是当我将 opacity 应用于包装器时,子元素不会受到影响。似乎是因为包装器是自定义 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,这似乎是目前的最新版本。

这里还有一个屏幕截图,以防问题只出现在我这边:

Opacity

我在 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]': '' }
})

最佳答案

您可以嵌套 <style></style>内部 block <ng-component></ng-component> .在你的情况下:

<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)

关于css - 无法为动画设置路由器导出的不透明度 [Chrome],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45239268/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com