I'm attempting to achieve a smooth transition effect on a navbar when hovering over it, changing the color from one to another. The navbar contains a list of words, but I am encountering an issue where during the transition, there is a quick flash (appearing like a white color block) around the ul/li/a elements, disrupting their transition timing. Oddly, everything else in the d-flex div transitions as expected. When hovered upon, the background color of the navbar should transform into white and the text into black with a .25s transition. This code snippet is written in Angular 8.
Here's my code:
.navbar-default .navbar-nav>li>a {
padding-top: 35px;
padding-left: 0;
padding-right: 0;
margin-left: 15px;
margin-right: 15px;
padding-bottom: 0;
min-height: 22px;
font-weight: 600;
font-size: 12px;
color: white;
line-height: 1.2em;
text-transform: uppercase;
display: block;
}
.d-flex {
height: 80px;
margin-right: auto;
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.25s;
}
.d-flex:hover,
.d-flex:hover li,
.d-flex:hover a {
background-color: white;
color: black !important;
}<nav class="navbar-default">
<div class="container-fluid no-transition">
<div class="d-flex">
<div class="navbar-collapse collapse" [ngClass]="{'in': !menuCollapsed}" [attr.aria-expanded]="!menuCollapsed">
<ul class="nav navbar-nav">
<li *ngFor="let link of navLinks" class="{{link.color}}" [ngClass]="{'active': activeTab === link}">
<a (onClick)="activateTab(link)" href="{{link.path}}" target="{{link.target}}">{{link.label}}</a>
</li>
</ul>
</div>
</div>
</div>
</nav>