如何修复 CSS 导航闪烁问题

Posted 2023-03-23

【中文标题】如何修复 CSS 导航闪烁问题

【英文标题】：How to fix a css navigation flashing issue

【发布时间】：2018-12-10 02:28:56

【问题描述】：

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

这是网站的链接 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) 

【问题讨论】：

目前有类似问题

@杰克。只需提供 100 分的赏金，希望我们能得到解决方案

@texas697 每当单击导航项时，导航项周围的 div (class="collapse show navbar-collapse") 会变为“折叠导航栏折叠”。所以显而易见的猜测是 onclick 以某种方式触发了折叠方法。一个黑客可能是推翻“崩溃”类，但我希望它不会发生。我会再调查一下，然后告诉你。同时，您能否检查一下您是否会以某种方式触发崩溃？

我猜你在导航项选择上调用了 _onToggle() 方法，这会切换状态 this.state.isOpen 并导致重新渲染。并且可能由于过渡效应，您会看到滞后。因此，只需在 NavToggle onclick 和项目选择上使用 _onToggle 方法，检查当前状态并仅在它打开时更新（这应该只适用于移动视图，不会导致桌面重新渲染）。

【参考方案1】：

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

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

【参考方案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 中相应地替换上面的类。