CSS过渡抖动答案

【问题标题】：Css transition shakingCSS过渡抖动
【发布时间】：2016-12-23 03:35:01
【问题描述】：

我的导航栏有问题。我添加了颜色过渡效果，但如果我将鼠标悬停在它上面，文本会抖动。它在我放大或缩小浏览器（Chrome）后出现。 “摇晃”似乎不是恒定的。

@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300);

@font-face {
	font-family: 'BebasNeuewebfont';
	src: url('../fonts/BebasNeuewebfont.eot');
	src: local('../fonts/BebasNeuewebfont'), url('../fonts/BebasNeuewebfont.woff') format('woff'), url('../fonts/BebasNeuewebfont.ttf') format('truetype');
}
body {
	background-color: #eee !important;
}
/* Navbar*/
.navbar { 
	background-color: #fff !important;
	padding-top: 6px;
}
.navbar .navbar-nav>.active>a:hover,.navbar .navbar-nav>li>a:hover, .navbar .navbar-nav>li>a:focus { background-color: #4375D7}
.navbar .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar .navbar-nav>.open>a, .navbar .navbar-nav>.open>a:hover,.navbar .navbar-nav>.open>a, .navbar .navbar-nav>.open>a:hover, 
.navbar .navbar-nav>.open>a:focus { background-color: #4C89FF}
.dropdown-menu { 
	background-color: #fff !important;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #4375D7}
.navbar { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar { border-color: #353739}
.navbar .navbar-brand { 
	color: #4C89FF !important;
}
.navbar .navbar-brand:hover { color: #4375D7}
.navbar .navbar-nav>li>a { color: #B0B0B0}
.navbar .navbar-nav>li>a:hover, .navbar .navbar-nav>li>a:focus { color: #353739}
.navbar .navbar-nav>.active>a,.navbar .navbar-nav>.open>a, .navbar .navbar-nav>.open>a:hover, .navbar .navbar-nav>.open>a:focus { 
	background-color: #fff !important;
}
.navbar .navbar-nav>.active>a:hover, .navbar .navbar-nav>.active>a:focus { color: #353739}
.dropdown-menu>li>a { color: #B0B0B0}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #fff}
.navbar{ /* assigning the top bar to the entire navbar div element */
    text-align: center;
    box-shadow: inset 0px 6px 0px #4C89FF; 
	
	/* initial light-blue color to the top bar */
}
.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
    color: #000;
    background: #4C89FF;
	margin-top: -6px;
	padding-top: 21px;
    box-shadow: inset 0px 6px 0px #75A4FF;
	
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	
	/* switch to a lighter color for active element */
}

.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
    color: #000;
    background-color: #fff;
	margin-top: -6px;
	padding-top: 21px;
    box-shadow: inset 0px 6px 0px #3c6dcc;
	
	-webkit-transition: all 0.3s ease-in-out;
 	-o-transition: all 0.3s ease-in-out;
 	-moz-transition: all 0.3s ease-in-out;
 	-ms-transition: all 0.3s ease-in-out;
    -kthtml-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; 
	
	/* switch to a darker-blue color on hover */
}

.navbar-brand {
    font-family: 'BebasNeuewebfont' !important;
    font-size: 40px !important;
    letter-spacing: 2px;
    font-weight: 400 !important;
	
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	
}

.navbar-brand:hover,
.navbar-brand:focus {
    box-shadow: inset 0px 6px 0px #3c6dcc; /* switch to a darker color on hover */
	margin-top: -6px;
	padding-top: 21px;
	padding-bottom: 35px;
	
	-webkit-transition: all 0.4s ease-in-out;
 	-o-transition: all 0.4s ease-in-out;
 	-moz-transition: all 0.4s ease-in-out;
 	-ms-transition: all 0.4s ease-in-out;
    -kthtml-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out; 
	
}

.navbar a {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
}

.navbar .navbar-toggle {
    border-color: #333;
    padding-top: 6px;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" type="image/jpg" href="#">
    <meta charset="utf-8">
	
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
<!-- Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
</head>

<body>

<!-- Navbar -->
<header class="navbar navbar-fixed-top bs-docs-nav" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.html" class="navbar-brand active">Brand</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li><a href="#">Text</a></li>
      </ul>
    </nav>
  </div>
</header>
</body>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</html>

这里是项目的链接：

http://jsfiddle.net/XENONFFM/0yygc5q5/

【问题讨论】：

标签： css google-chrome debugging css-transitions

【解决方案1】：

它会抖动，因为您正在从无框阴影 (0px) 动画到框阴影 (6px)。

在这种情况下，我个人会使用border 属性而不是box-shadow。这里要做的主要事情是提前定义边框/框阴影但不显示它。为此，您可以将颜色设置为透明，然后在悬停时将其设置为所需的颜色。

下面是一些要做什么的伪代码：

header {
  border-top: 5px solid purple;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  float: left;
  margin: -5px;
  padding: 15px 25px;
  border-top: 5px solid transparent;
  transition: all 300ms ease-in-out;
}
li:hover {
  border-top: 5px solid yellow;
}

<header>
  <nav>
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
    </ul>
  </nav>
</header>

如果您想继续使用 box-shadow，请将悬停选择器 (.navbar .navbar-nav > li > a:hover) 中的 margin、padding 和 box-shadow 属性复制到链接选择器 (.navbar .navbar-nav > li > a) 并将颜色设置为 @ 987654331@.

【讨论】：