Question

我在动画过渡时遇到了一些问题，我需要等待当鼠标悬停在li上时会出现其ul，并且还要在鼠标悬停在2nd li上，如果我仍然首先看到对角线，则需要等待2秒，如果我在某个时间之后在鼠标悬停在2nd上时将分别显示其UL 。即时通讯使用基础它可以在html中工作，但是当我将html放到有角度的html中时，它仍然可以正常工作，但是当我放入循环时，它会受到干扰。 https://machinesrentals.com/ 试图创建演示但没有成功 https://angular-ifgqc7.stackblitz.io

animations: [
    trigger('openClose', [
      // ...
      state('open', style({
        opacity: 1,
        backgroundColor: 'white'
      })),
      state('closed', style({
        opacity: 1.5,
        backgroundColor: 'white'
      })),
      transition('open => closed', [
        animate('2s')
      ]),
      transition('closed => open', [
        animate('1s')
      ]),
    ]),
  ],
toggle(id) {
    this.newHover(id)
    this.isOpen = !this.isOpen;
    console.log(this.isOpen, this.clicked)
  }
  newHover(catId, type='add') {
    if (type === 'add') {
      if (this.clicked > 0)
        this.newHover(this.clicked, 'remove')
      //document.getElementById(this.clicked.toString()).classList.remove('js-dropdown-active')

      this.clicked = parseInt(catId);
      document.getElementById(catId).classList.add('js-dropdown-active')
    }

    else if (type === 'remove') {
      this.clicked = 0;
      transition("void => *", [
        style({ opacity: 0 }),
        animate(1500)
      ])
      document.getElementById(catId).classList.remove('js-dropdown-active')

    }
  }


<ul class="menu vertical submenu is-dropdown-submenu first-sub">
         <li class="submenu-head is-submenu-item is-dropdown-submenu-item">What would you like to rent?</li>  <li *ngFor="let maincat of categories; let maincatp = index;" class="is-dropdown-submenu-parent is-submenu-item is-dropdown-submenu-item opens-right">
                  <a (mouseover)="toggle(maincat.id)">
                    {{maincat.name}} {{isOpen ? 'open' : 'closed'}}
                  </a>
                  <ul class="menu vertical submenu is-dropdown-submenu" id="{{maincat.id}}" [@openClose]="isOpen ? 'open' : 'closed'">
                    <li class="submenu-head">{{maincat.name}}
                      <a href="javascript:;" class="floatright mt1 mr10 bordernone"
                        (click)="newHover(maincat.id, 'remove')">
                        <i class="fa fa-close"></i></a>
                    </li>
                    <li *ngFor="let subcat of maincat.childCategories; let subcatp = index;"><a
                        [routerLink]="['/category-search-result']"
                        [queryParams]="{categories: maincat.id, subcategories: subcat.id}">{{subcat.name}}</a></li>

                  </ul>
                </li>

              </ul>

http://www.kreativesoft.com/demo/mr/请检查实际的html，如果您走对角线，则可以在菜单中稍作延迟

Angular 7中的动画试图制作动画但失败了

0 个答案: