Question

我是新手，我想使用交错动画在移动视图的菜单列表项中添加一些动画效果。我希望每次单击汉堡菜单时都可以插入菜单链接。如果有人可以在下面的代码中告诉我我在哪里做错，将不胜感激：

menu.component.ts：

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

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css'],
 
  animations:[ 
    trigger('openClose',[
      transition('* => *',[
        query('open', style({opacity:0, transform:'translateX(50px)'}),{optional:true}),
        query('closed', stagger('0.5s',[
          animate('1s ease-in', keyframes([
            style({opacity:0, transform:'translateX(50px)'}),
            style({opacity:1, transform:'translateX(0px)'}),
          ]))
        ]),{optional:true})
      ])
    ])
  ]
})
export class MenuComponent implements OnInit {

  sideMenuToggle: boolean=false;

  menuLinks: any=[
    {name:"About"},
    {name:"Profile"},
    {name:"My Stock"},
    {name:"Wishlist"},
    {name:"Logout"},
    {name:"Loginout"},
    {name:"Signup"}
  ]

  constructor() { }

  ngOnInit(): void {
  }

  onclickBurger(){
    this.sideMenuToggle=!this.sideMenuToggle;
    console.log(this.menuLinks.length);
  }


}

在这里，我使用了带有通配符状态的交错动画。菜单链接从一个称为munuLinks的数组中循环出来。

menu.component.html：

<nav>
    <div class="logo">
        <h4>Taant-Haal</h4>
    </div>
    
    <ul class="nav-links" [ngClass]="{'nav-active' : sideMenuToggle}" [@openClose]="menuLinks.length">        
        <li  *ngFor="let link of menuLinks">
            <a>{{link.name}}</a>
        </li>
    </ul>

    <div class="burger" (click)="onclickBurger()">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
</nav>

李的角交错动画不起作用

0 个答案: