Goal：使用[]在Angular中用Typescript为元素动画淡入
document.getElementById("elementID").animate我使用了示例（更改了一下）from developer.mozilla.org
预期：正常工作。
实际结果：代码有效，但存在Chrome开发人员错误。
Chrome错误详细信息：
core.js：3838错误TypeError：无法读取null的属性'animate'
在PlywoodHebComponent.push ../ src / app / components / plywood-heb / plywood-heb.component.ts.PlywoodHebComponent.fadeIn（plywood-heb.component.ts：22）在PlywoodHebComponent.push ../ src / app / components / plywood-heb / plywood-heb.component.ts.PlywoodHebComponent.getChildEvent（plywood-heb.component.ts：18）在PlywoodHebComponent_Template_app_plywood_side_navbar_stringOutput_2_listener（template.html：3）在executeListenerWithErrorHandling（core.js：14739）在wrapListenerIn_markDirtyAndPreventDefault（core.js：14774）在SafeSubscriber.schedulerFn [作为_next]（core.js：24856）在SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.SafeSubscriber .__ tryOrUnsub（Subscriber.js：192）在SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.SafeSubscriber.next（Subscriber.js：130）在Subscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._next（Subscriber.js：76）在Subscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.next（Subscriber.js：53）
UPDATE：
我尝试过的：我看到如果删除* ngIf，问题就消失了。这意味着在元素出现在DOM中之前，将在fadeIn（）上检查元素的ID。我认为我应该使用可见性而不是* ngIf。
某些代码：
HTML：
<nav class="sidebar"> <text-style2-container> <app-plywood-side-navbar (stringOutput)=getChildEvent($event)></app-plywood-side-navbar> </text-style2-container> </nav> <article> <div class="description-text" *ngIf="imageName=='twin';"> <text-style1-container> <app-twin-heb></app-twin-heb> </text-style1-container> </div> <div class="description-text" *ngIf="imageName=='okoume';"> <text-style1-container> <app-okoume-heb></app-okoume-heb> </text-style1-container> </div> <div class="description-text" *ngIf="imageName=='birch';"> <text-style1-container> <app-birch-heb></app-birch-heb> </text-style1-container> </div> </article> <div class="image-box" *ngIf="imageName;"> <!-- "image" id element is fading in using the typescript but has errors on chrome developer mode --> <img id="image" src="../../../assets/images/plywoods/{{imageName}}-plywood.jpg" alt="{{imageName}} plywood"> </div>打字稿：
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-plywood-heb', templateUrl: './plywood-heb.component.html', styleUrls: ['./plywood-heb.component.css'] }) export class PlywoodHebComponent { imageName: string; getChildEvent($event) { this.imageName = $event; this.fadeIn(); } fadeIn(): void { document.getElementById("image").animate([ // keyframes { opacity: '0' }, { opacity: '1' } ], { duration: 2000, }); } }CSS：
还附加index.html，因为其中没有js。.sidebar, .image-box, .description-text, img { box-sizing: border-box; float: right; } .sidebar, .image-box, .description-text { text-align: right; padding-top: 150px; } .sidebar { width: 15%; padding-right: 50px; } .image-box, .description-text { width: 40%; } .image-box { margin-top: 2rem; } img { width: 50%; padding-right: 100px; /* fading in animation for autoran plywood route */ animation-name: fadeInAnimation; animation-duration: 5s; } .description-text { text-align: right; padding-right: 100px; } @keyframes fadeInAnimation { from { opacity: 0;} to { opacity: 1;} }编辑：
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>אורי גרוס עצים ולבידים</title>
<base href="/">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body dir="rtl">
<app-Layout></app-Layout>
</body>
</html>
目标：使用document.getElementById（“ elementID”）在Angular中使用Typescript动画淡入一个元素。动画我使用了来自developer.mozilla.org的示例（稍作改动），期望：可以工作...
我在理解* ngIf引起问题之后，通过更改html代码来修复它，我可能只是隐藏该元素而不破坏它。因此，我仅更改了元素的显示。我附上html代码：