css - Angular 4在按钮悬停时添加过渡

我正在尝试在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值）。

最佳答案

您可能可以通过在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为true，则将调用matchHoverButtonColor(cat)。否则，将调用matchButtonColor(cat)。

关于css - Angular 4在按钮悬停时添加过渡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50059562/