Маршрутизатор анимации сиденав - Angular - PullRequest
Новая
       11

Маршрутизатор анимации сиденав - Angular

0 голосов
/ 27 июня 2019

Когда я нажимаю на ссылку в меню, я бы хотел, чтобы содержимое отображалось с эффектом затухания. Я следую этому примеру, но мой проект не работает.

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