我目前正在尝试Angular7路线过渡动画， 并遇到以下问题：
在我的应用中，有一个入口组件，它具有自己的路由模块和<router-outlet>。我想要实现的是，每当路线更改时，旧显示的组件就会opacity: 0在新组件消失之前消失（）。但是不幸的是，我似乎无法使其正常工作。动画根本不播放，并且按照角度文档中的说明进行调试：动画过渡和触发器
(@routeAnimation.start)="onAnimationEvent($event)"
(@routeAnimation.done)="onAnimationEvent($event)"
显示动画仅触发一次（在页面加载时；甚至不播放），但不是在我使用导航器组件浏览应用程序时触发的。
我的代码如下所示：
entry.component.ts
@Component({
selector: 'entry',
templateUrl: './entry.component.html',
styleUrls: ['./entry.component.css'],
animations: [routeAnimation],
})
export class EntryComponent implements OnInit {
constructor() { }
ngOnInit() { }
prepareRoute(outlet: RouterOutlet) {
const animation = outlet.activatedRouteData['animation'] || {};
return animation['value'] || 'WelcomePage';
}
}
entry.component.html
<navigator>
</navigator>
<div [@routeAnimation]="prepareRoute(o)" id="entry-content">
<router-outlet #o="outlet" name="entry"></router-outlet>
</div>
entry-routing.module.ts
const routes: Routes = [
{
path: 'entry',
component: EntryComponent,
children: [
{
path: '', …打开/关闭<div>对话框时遇到问题.我的代码看起来像这样:
<html>
<head>
<title>Wochenplaner</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="dialog" style="display: none;">
<p id="demo">test</p>
<button onclick="close()">Close</button>
</div>
<button onclick="open()">Click me</button>
<script>
var test = document.getElementById("dialog");
function dialog() {
if (test.style.display !== "none") {
test.style.display = "none";
} else {
test.style.display = '';
}
}
function open() {
test.style.display = '';
}
function close() {
test.style.display = "none";
}
</script>
</body>
</html>
当我点击"Click me"时,按钮消失,没有其他任何事情发生.如果我使用对话框() - 函数而不是open()和close()它按预期工作,<div>只需单击"单击我"按钮即可显示,并单击"关闭"或"单击我"消失.我的问题是:为什么当我使用dialog()时它可以工作,而不是open()和close()？