Угловой 4 добавить переход при наведении кнопки - PullRequest
Новая
       12

Угловой 4 добавить переход при наведении кнопки

0 голосов
/ 27 апреля 2018

Я пытаюсь добиться того же эффекта перехода на кнопках, как здесь https://getbootstrap.com/docs/4.0/components/buttons/#outline-buttons. Мне нужно гораздо больше настроек, чем при начальной загрузке, поэтому я пытаюсь сделать это самостоятельно, используя стили / эффекты CSS.

Вот как я отображаю кнопки: 

<div class="container">
      <div *ngFor="let cat of categories">
        <ul>
          <li>
            <button [ngStyle]="matchButtonColor(cat)" (mouseover)="transition()" class="btn " type="button" (click)="openDialog(cat)"> {{cat.name}} </button>
            <categories *ngIf="cat.children" [categories]="cat.children" (category)="onClickChild($event)"></categories>
          </li>
        </ul>
      </div>
</div>

Две функции в компоненте (да, я знаю, что эффект перехода в этой функции не имеет смысла, поскольку он не влияет на зависание): 

  matchButtonColor(category: AdminCategory) {
    var s = {
      'background-color': 'white',
      'border-color': '#8064A2',
      'color': '#8064A2',
      'transition': 'color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out'
    }
    return s;
  }

  transition(){
    console.log("aasdasd");
  }

В настоящее время я получил это. Теперь я хотел бы получить этот эффект перехода при наведении. Есть ли способ заставить его работать? Я не могу просто поместить его в файл .css, потому что мне нужно динамически создавать цвета (это зависит от значения cat).

enter image description here

1 Ответ

0 голосов
/ 28 апреля 2018

Вы, вероятно, можете достичь этого, установив hoverFlag в true на mouseover и сбросив в false на mouseout. Затем есть два метода - один для состояния наведения и другой для нормального состояния. (Вы можете просто использовать один метод и передавать флаг в зависимости от ваших требований). 

<button [ngStyle]="hoverFlag ? matchHoverButtonColor(cat) : matchButtonColor(cat)" (mouseover)="hoverFlag = true" (mouseout)="hoverFlag = false" class="btn " type="button" (click)="openDialog(cat)"> {{cat.name}} </button>

Итак, если hoverFlag истинно, то будет вызываться matchHoverButtonColor(cat). В противном случае будет вызван matchButtonColor(cat).

...