-2
li 두 개의 드롭 다운 (Portal 및 Retail)을 반복적으로 마우스 오버 할 때 전체에 깜박임이 있습니다. 브라우저 관련 문제 인 경우 Windows 7에서 Chrome 51을 사용하고 있습니다. ul.nav.navbar-subnav을 표시하는 전환 효과와 관련이 있다고 생각하지만 문제를 파악하지 못했습니다. 상위 헤더에 하위 메뉴를 추가 할 때까지는 시작되지 않았습니다. 아래는 깜박 거리는 문제의 데모이며 깜박임이없는 this version과 비교해보십시오.전환으로 인한 깜박임을 제거하는 방법
업데이트 사실, 방금 aside에서 깜박임이 발생하는 것으로 나타났습니다. --duration을 0으로 변경하면 깜박임이 제거됩니다. 새로운 질문 : opacity 전환을 유지하면서 깜박임을 제거하는 방법이 있습니까?
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic);
html {
-webkit-font-smoothing: antialiased;
font-family: 'Source Sans Pro', sans-serif;
}
* {
box-sizing: border-box;
}
a {
cursor: pointer;
}
a.active-module {
cursor: default;
}
li.active > a {
cursor: default;
}
.topnavbar-wrapper {
display: block;
font-size: 14px;
height: 55px;
line-height: 21.4px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 121;
}
.topnavbar {
display: block;
font-size: 14px;
line-height: 21.4px;
margin-bottom: 0px;
min-height: 55px;
position: relative;
width: 100%;
z-index: 1050;
}
.nav-wrapper {
box-sizing: content-box;
display: block;
position: absolute;
font-size: 14px;
line-height: 21.4px;
padding-bottom: 0px;
padding-top: 0px;
z-index: 10;
height: 55px;
left: 68px;
right: 0;
}
.topnavbar .nav {
display: block;
font-size: 14px;
line-height: 21.4px;
margin-bottom: 0px;
margin-right: 0px;
margin-top: 0px;
padding-left: 0px;
white-space: nowrap;
}
.navbar-nav > li {
display: block;
float: left;
font-size: 14px;
line-height: 21.4px;
position: static;
text-align: left;
}
.navbar-nav > li > a {
display: block;
font-size: 14px;
font-weight: bold;
height: 55px;
line-height: 21px;
outline-style: none;
outline-width: 0px;
padding-bottom: 17px;
padding-left: 15px;
padding-right: 15px;
padding-top: 17px;
position: relative;
text-align: left;
text-decoration: none;
}
aside {
bottom: 0px;
display: block;
font-size: 14px;
left: 0px;
line-height: 21.4px;
position: fixed;
top: 55px;
width: 68px;
z-index: 119;
}
.aside-inner {
display: block;
font-size: 14px;
line-height: 21.4px;
overflow-x: hidden;
overflow-y: hidden;
width: 68px;
height: 100%;
}
.sidebar {
display: block;
font-size: 14px;
line-height: 21.4px;
overflow-x: hidden;
overflow-y: scroll;
width: 68px;
height: 100%;
}
.nav {
display: block;
font-size: 14px;
line-height: 21.4px;
margin-bottom: 0px;
margin-top: 0px;
padding-left: 0px;
padding-right: 0px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
.sidebar > .nav > li {
display: block;
width: 68px;
}
.sidebar li > a {
display: block;
position: relative;
padding: 20px 5px;
}
.sidebar > .nav > li > a > em {
display: inline-block;
font-size: 22.4px;
height: auto;
letter-spacing: 0.35px;
line-height: 22.4px;
text-align: center;
width: auto;
}
.sidebar > .nav > li > .sidebar-subnav {
opacity: 0;
position: absolute;
top: 0;
left: 100%;
width: 200px;
pointer-events: none;
}
.sidebar > .nav > li > .sidebar-subnav > li > a {
padding: 10px;
}
.sidebar > .nav > li > .sidebar-subnav > li .center-block {
height: auto;
}
.sidebar > .nav > li:hover > .sidebar-subnav {
opacity: 1;
pointer-events: all;
}
li > a > div {
display: block;
float: left;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.35px;
line-height: 21.4px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
width: 60px;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.center-block {
display: block;
font-size: 11.9px;
font-weight: bold;
height: 50px;
letter-spacing: 0.35px;
line-height: 18.19px;
margin-left: 0px;
margin-right: 0px;
}
.topnavbar .nav-wrapper {
background-color: var(--top-bg);
border-bottom: var(--border-thickness) solid var(--border);
}
aside > .aside-inner > .sidebar {
width: 87px;
}
aside {
box-sizing: content-box;
background-color: var(--side-bg);
border-right: var(--border-thickness) solid var(--border);
}
.navbar-nav li > a {
color: var(--top-fg);
background-color: var(--top-bg);
transition-property: color, background-color;
transition-duration: var(--hover-duration);
transition-timing-function: ease;
}
aside > .aside-inner > .sidebar > .nav > li > a {
color: var(--side-fg);
background-color: var(--side-bg);
transition-property: color, background-color;
transition-duration: var(--hover-duration);
transition-timing-function: ease;
}
.navbar-nav li:hover > a {
color: var(--hover-top-fg);
background-color: var(--hover-top-bg);
}
aside > .aside-inner > .sidebar > .nav > li:hover > a {
color: var(--hover-side-fg);
background-color: var(--hover-side-bg);
}
.navbar-nav li > a.active-module {
color: var(--active-top-fg);
background-color: var(--active-top-bg);
transition-duration: var(--active-duration);
}
aside > .aside-inner > .sidebar > .nav > li.active > a {
color: var(--active-side-fg);
background-color: var(--active-side-bg);
transition-duration: var(--active-duration);
}
.sidebar-subnav {
border: var(--sub-border-thickness) solid var(--sub-border);
transition: opacity var(--duration) ease;
}
.sidebar-subnav > li > a {
color: var(--sub-fg);
background-color: var(--sub-bg);
transition-property: color, background-color;
transition-duration: var(--hover-duration);
transition-timing-function: ease;
}
.sidebar-subnav > li:hover > a {
color: var(--hover-sub-fg);
background-color: var(--hover-sub-bg);
}
.sidebar-subnav > li.active > a {
color: var(--active-sub-fg);
background-color: var(--active-sub-bg);
transition-duration: var(--active-duration);
}
.navbar-nav .navbar-subnav {
opacity: 0;
width: 200px;
pointer-events: none;
position: absolute;
z-index: 2;
}
.navbar-nav > li > .navbar-subnav > li > a {
padding: 10px;
display: block;
}
.navbar-nav > li:hover > .navbar-subnav {
opacity: 1;
pointer-events: all;
}
.navbar-subnav {
border: var(--sub-border-thickness) solid var(--sub-border);
transition: opacity var(--duration) ease;
}
.navbar-subnav > li {
position: relative;
}
.navbar-subnav > li > a {
color: var(--sub-fg);
background-color: var(--sub-bg);
transition-property: color, background-color;
transition-duration: var(--hover-duration);
transition-timing-function: ease;
}
.navbar-subnav > li:hover > a {
color: var(--hover-sub-fg);
background-color: var(--hover-sub-bg);
}
.navbar-subnav > li > a.active-module {
color: var(--active-sub-fg);
background-color: var(--active-sub-bg);
transition-duration: var(--active-duration);
}
/* underline hover effect */
.navbar-nav li > a:after {
position: absolute;
content: "";
bottom: 0;
left: 0;
right: 0;
height: 0;
background-color: var(--hover-line-top);
transition: height var(--hover-line-duration) ease;
}
.sidebar-nav li > a:after {
position: absolute;
content: "";
top: 0;
bottom: 0;
right: 0;
width: 0;
background-color: var(--hover-line-side);
transition: width var(--hover-line-duration) ease;
}
.navbar-subnav > li > a:after {
width: 0;
height: auto;
top: 0;
left: 0;
right: auto;
background-color: var(--hover-line-sub);
transition: width var(--hover-line-duration) ease;
}
.sidebar-subnav > li > a:after {
background-color: var(--hover-line-sub);
right: auto;
left: 0;
}
.navbar-nav li > a.active-module:after {
background-color: var(--hover-line-active-top);
}
.sidebar-nav li.active > a:after {
background-color: var(--hover-line-active-side);
}
.navbar-nav > li:hover > a:after {
height: var(--hover-line-thickness);
}
.navbar-subnav > li:hover > a:after,
.sidebar-nav li:hover > a:after {
width: var(--hover-line-thickness);
}
.navbar-subnav > li.active > a:after,
.sidebar-subnav > li.active > a:after {
background-color: var(--hover-line-active-sub);
}
.sidebar .nav > li.active > a > em,
.sidebar .nav > li.open > a > em {
color: inherit;
}
:root {
--edf-orange: #FE5815;
--edf-light-orange: #FFA02F;
--edf-green: #509E2F;
--edf-light-green: #C4D600;
--edf-blue: #005BBB;
--edf-dark-blue: #001A70;
--background: var(--edf-blue);
--color: #FFFFFF;
--border: var(--edf-orange);
--border-thickness: 2px;
--sub-border: var(--edf-dark-blue);
--sub-border-thickness: 1px;
--duration: 0.2s;
--logo-bg: var(--background);
--logo-fg: var(--color);
--top-bg: var(--background);
--top-fg: var(--color);
--side-bg: var(--background);
--side-fg: var(--color);
--sub-bg: #777777;
--sub-fg: var(--color);
--active-top-bg: var(--edf-dark-blue);
--active-top-fg: var(--top-fg);
--active-side-bg: var(--edf-dark-blue);
--active-side-fg: var(--side-fg);
--active-sub-bg: var(--edf-dark-blue);
--active-sub-fg: var(--sub-fg);
--active-duration: var(--duration);
--hover-top-bg: var(--top-bg);
--hover-top-fg: var(--top-fg);
--hover-side-bg: var(--side-bg);
--hover-side-fg: var(--side-fg);
--hover-sub-bg: #3B3B3B;
--hover-sub-fg: var(--sub-fg);
--hover-duration: var(--duration);
--hover-line-thickness: 4px;
--hover-line-top: var(--edf-orange);
--hover-line-side: var(--edf-orange);
--hover-line-sub: transparent;
--hover-line-active-top: transparent;
--hover-line-active-side: transparent;
--hover-line-active-sub: transparent;
--hover-line-duration: var(--duration);
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://thesabbir.github.io/simple-line-icons/css/simple-line-icons.css" rel="stylesheet"/>
<header class="topnavbar-wrapper">
<nav class="navbar topnavbar">
<div class="nav-wrapper">
<ul class="nav navbar-nav">
<li>
<a>
<em></em> Portal
</a>
<ul class="nav navbar-subnav nav-floating">
<li>
<a>
<em class="icon-home"></em> Dashboard
</a>
</li>
<li>
<a>
<em class="fa fa-database"></em> Asset Management
</a>
</li>
<li>
<a>
<em class="fa fa-users"></em> Broker
</a>
</li>
<li>
<a>
<em class="fa fa-tasks"></em> Deal Flow
</a>
</li>
<li>
<a>
<em class="fa fa-folder"></em> Documents
</a>
</li>
<li>
<a>
<em class="fa fa-book"></em> ESP
</a>
</li>
<li>
<a>
<em class="fa fa-tags"></em> Invoice
</a>
</li>
</ul>
</li>
<li>
<a>
<em></em> Retail
</a>
<ul class="nav navbar-subnav nav-floating">
<li>
<a>
<em class="icon-layers"></em> Billing
</a>
</li>
<li>
<a>
<em class="icon-globe"></em> Market Data
</a>
</li>
</ul>
</li>
<li>
<a class="active-module">
<em class="fa fa-refresh"></em> Mirror Trades
</a>
</li>
<li>
<a>
<em class="fa fa-line-chart"></em> P&L
</a>
</li>
</ul>
</div>
</nav>
</header>
<aside class="aside">
<div class="aside-inner">
<nav class="sidebar">
<ul class="nav sidebar-nav">
<li>
<a>
<div class="text-center">
<em class="fa fa-random"></em>
</div>
<small class="center-block text-center">Swaps</small>
</a>
</li>
<li>
<a>
<div class="text-center">
<em class="fa fa-bullseye"></em>
</div>
<small class="center-block text-center">Physicals</small>
</a>
</li>
<li>
<a>
<div class="text-center">
<em class="fa fa-link"></em>
</div>
<small class="center-block text-center">Link Trades</small>
</a>
</li>
<li class="active">
<a>
<div class="text-center">
<em class="icon-layers"></em>
</div>
<small class="center-block text-center">Reports</small>
</a>
<ul class="nav sidebar-subnav nav-floating" style="top: 270px;">
<li>
<a class="center-block">
<small class="center-block text-left">Api Error Report</small>
</a>
</li>
<li>
<a class="center-block">
<small class="center-block text-left">Unsupported Trades Report</small>
</a>
</li>
<li>
<a class="center-block">
<small class="center-block text-left">Physical Trade Discrepancy Report</small>
</a>
</li>
<li class="active">
<a class="center-block">
<small class="center-block text-left">Swap Trade Discrepancy Report</small>
</a>
</li>
<li>
<a class="center-block">
<small class="center-block text-left">Physical Trade Tie-out Report</small>
</a>
</li>
<li>
<a class="center-block">
<small class="center-block text-left">Swap Trade Tie-out Report</small>
</a>
</li>
</ul>
</li>
<li>
<a>
<div class="text-center">
<em class="fa fa-exchange"></em>
</div>
<small class="center-block text-center">Sleeve Trades</small>
</a>
</li>
</ul>
</nav>
</div>
</aside>
코드를 찾는 데 도움이되는 질문에는 질문 자체 **를 재현하는 데 필요한 가장 짧은 코드가 포함되어야합니다. [** 예제 또는 사이트 링크 **] (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work- can-i-just-paste-a-link-to-it) 링크가 무효화 될 경우 같은 문제가있는 다른 미래 SO 사용자에게는 귀하의 질문이 가치가 없을 것입니다. –
파이어 폭스에서 깜박임을 볼 수는 없지만, 링크 된 코드를 살펴볼 부분이 많기 때문에 문제를 일으키는 부품을 자세하게 설명하는 바이올린을 제작할 수 있다면 도움이 될 것입니다. – Martin
* 정확히 * 깜박 거림? – Martin