Angular 4在按钮悬停时添加转换

Question

我正试图在像https://getbootstrap.com/docs/4.0/components/buttons/#outline-buttons这样的按钮上实现相同的过渡效果。我需要比bootstrap提供更多的自定义，所以我尝试使用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值）。

Answer 1

您可以通过在hoverFlag上将mouseover设置为true并在mouseout上将其重置为false来实现此目的。然后有两个方法 - 一个用于悬停状态，另一个用于正常状态。 （您可以只使用一种方法并根据您的要求传递标记）。

<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)。