Анимация в Angular 7 пытается сделать анимацию, но не удается - PullRequest
Новая
       17

Анимация в Angular 7 пытается сделать анимацию, но не удается

0 голосов
/ 03 апреля 2019

Я столкнулся с некоторой проблемой при переходе анимации, Мне нужно подождать, когда появится указатель мыши на li, и появится указатель мыши, а также указатель мыши на 2-й позиции. Нужно подождать 2 секунды. , Я использую фонд, он работает в 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, это хорошая задержка в меню, если вы идете по диагонали

...