路由器动画Sidenav-Angular

Question

当我单击菜单中的链接时，我希望显示的内容具有淡入淡出效果。我正在跟踪此示例，但是我的项目无法正常工作。

https://plnkr.co/edit/AfIB1i?p=preview

这是我的组件：条款

import { Component, OnInit } from '@angular/core';
import { trigger, state, animate, transition, style } from '@angular/animations';

@Component({
  selector: 'app-regulamento',
  templateUrl: './regulamento.component.html',
  styleUrls: ['./regulamento.component.css'],
   // make fade in animation available to this component
   animations: [
      // trigger name for attaching this animation to an element using the [@triggerName] syntax
    trigger('fadeInAnimation', [

      // route 'enter' transition
      transition(':enter', [

          // css styles at start of transition
          style({ opacity: 0 }),

          // animation and styles at end of transition
          animate('.3s', style({ opacity: 1 }))
      ]),
    ])
  ],
   // attach the fade in animation to the host (root) element of this component
   host: { '[@fadeInAnimation]': '' }
})
export class RegulamentoComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

我身边的一颗卫星

<ul id="slide-out" class="sidenav sidenav-fixed right-aligned side-nav" (click)="HideSideNav()">

  <div class="menu sidenav-close">    
    <!--Regulamento-->
    <div class="sidenav-close row link" routerLink="regulamento">
      <div class="col s3">
        <img src="../../../assets/icons/outline-assignment-24-px.svg" class="alinha-icone dimensao-icone">
      </div>
      <div class="col s9">
        <p class="texto-menu-lateral">Regulamento</p>
      </div>
    </div>
    <div class="meudivider"></div>

  </div>
</ul>