如何修复 css 导航闪烁问题

Question

我有一个使用 reactstrap(bootstrap4) 的 React 应用程序。我使用 react-router 为导航创建了一个简单的布局。我无法弄清楚为什么当您单击一个时导航栏项目会闪烁。我正在使用来自 react-router-dom 的内置 NavLink，它使选定的 NavItem 突出显示。

这里是 link 网站 Website

页眉组件

import {
  Collapse,
  Navbar,
  NavbarToggler,
  Nav,
  NavItem,
  NavbarBrand,
  NavLink } from 'reactstrap'
import { NavLink as RRNavLink } from 'react-router-dom'

const Item = ({link, label}) => (
  <NavItem>
    <NavLink exact activeClassName='active-tab' to={link} tag={RRNavLink}>{label}</NavLink>
  </NavItem>
)

const ROUTES = []

export default class extends React.Component {
  render () {
    return (
      <div className='header-bkg'>
        <Navbar color='faded' light expand='md'>
          <NavbarBrand className='text-white'>Star Designs</NavbarBrand>
          <NavbarToggler onClick={this._onToggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className='ml-auto' navbar>
              {ROUTES.map((x, i) => (
                <Item key={i} {...x} />
              ))}
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    )
  }
}

CSS

   .header-bkg {
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.6), 0 0 5px rgba(0, 0, 0, 0.6);
    border-top: 0 solid rgba(47, 46, 46, 1);
    border-bottom: 0 solid rgba(47, 46, 46, 1);
    background-color: #d7a29e;
}

.nav-link:hover,
.nav-link:active {
    background-color: #ede9e2;
}

.nav-link {
    text-transform: uppercase;
}

.active-tab {
    background-color: #ede9e2;
}

:focus {
    outline: -webkit-focus-ring-color auto 0;
}

@media (max-width: 575px) {
}

@media (max-width: 767px) {
}

@media (max-width: 991px) {

}

@media (max-width: 1199px) {
}

Answer 1

单击菜单项时，一些 js 代码在 collapse navbar-collapse 元素上添加 height : 0px（用于移动视图中的关闭下拉动画效果），然后在几毫秒后将其删除。添加以下样式，由于更高的特异性和重要属性，它将不允许 height 0 在桌面视图中应用。因此，不会发生闪烁。

@media (min-width: 768px) {
    .navbar-expand-md .navbar-collapse {
        height: auto !important;
    }
}

Answer 2

尝试使用：

.yourMenuButtonClass {
    -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
      -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
      -webkit-animation: none;
  -o-animation: none;
  animation: none;
}

.yourSubmenuThatAppearsAfterClickClass {
     -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
     -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
     -webkit-animation: none;
  -o-animation: none;
  animation: none;
}

相应地替换 CSS 中的类。

如何修复 css 导航闪烁问题

How to fix a css navigation flashing issue

html

css

reactjs

react-router-v4