当前位置: 首页 > 知识库问答 >
问题:

如何解决css导航闪烁问题

齐驰
2023-03-14

我有一个使用reactstrap的react应用程序(bootstrap4)。我使用react-router为导航创建了一个简单的布局。我不明白为什么当你点击一个navbar项目时会闪现。我使用的是react-router-dom中的内置NavLink,它保持选中的NavItem高亮显示。

这里是网站的链接

标题组件

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) {
}

共有1个答案

屈昊天
2023-03-14

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

@media (min-width: 768px) {
    .navbar-expand-md .navbar-collapse {
        height: auto !important;
    }
}
 类似资料:
  • 本文向大家介绍wxPython之解决闪烁的问题,包括了wxPython之解决闪烁的问题的使用技巧和注意事项,需要的朋友参考一下 利用Python生成PDF文件时,对比了fpdf和reportlab两个库。fpdf最新更新还是2015年, 另外reportlab的资料网上更多一些。所以选择使用reportlab。 pdfgen pdfgen包是生成PDF文档最底层的接口。一个pdfgen编程实质是一

  • 这是因为在开发模式下,为了通过 Webpack 实现热加载,CSS代码是打包在 JavaScript 代码中,并动态打到页面中去,从而元素重绘引起了闪烁。 不用担心,在生产模式下,CSS代码会单独打包至独立的文件并置于head标签内,不会出现页面闪烁的现象。

  • 在我的反应原生应用程序中,我有一个切换导航器来在认证堆栈和应用堆栈之间导航: 它可以工作,但是当我从AuthStack转到AppStack时,它会闪烁,屏幕会向上移动。我如何防止这种行为增加平稳过渡。

  • 问题内容: 我现在正在编写一个JApplet,每当我调用super.paint()时,该applet都会闪烁。我正在使用双缓冲(先绘制图像,然后渲染该图像),但我认为super.paint()正在清除屏幕或其他东西,打败了我的双缓冲。 我知道我应该使用paintComponents(),但是由于某些原因,当我调用“ currentScreen.Draw(g)”时,它不会显示屏幕的绘制。 谁能帮我这

  • 我正在开发一个简单的聚合,它对给定资源上发生的事件总数进行汇总(请参阅:在flink中计算总数并定期发射)。在一些人的帮助下,我成功地完成了这项工作,但现在我遇到了另一个问题。 我试图计算资源生命周期的总数,但我正在从保留期为24小时的kinesis流中读取事件。因为这意味着我无法访问在此之前发生的事件,所以我需要从一个每天计算一次总数的遗留(批处理)系统引导我的状态。 基本上,我希望以某种方式从

  • 本文向大家介绍C#控件闪烁的解决方法,包括了C#控件闪烁的解决方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了C#控件闪烁的解决方法。分享给大家供大家参考。具体分析如下: 如果你在Form中绘图的话,不论是不是采用的双缓存,都会看到图片在更新的时候都会不断地闪烁,解决方法就是在这个窗体的构造函数中增加以下三行代码: 请在构造函数里面底下加上如下几行: 参数说明: UserPaint 如