使用css過渡從中心向左和向右擴展寬度

Question

我希望我的導航欄具有固定寬度並居中，在頁面滾動時從其中心向左和向右擴展。 目前它剛剛跳到新的寬度。

我設置了一個演示，你可以看到我正在嘗試做什么： http ： //codepen.io/anon/pen/Qyozvd

（最好看看codepen上的演示。）

 $(document).ready(function() { // run test on initial page load checkSize(); // run test on resize of the window $(window).resize(checkSize); $(".navbar-toggle").on("click", function () { $(this).toggleClass("navbar-toggle-fix"); }); }); var header, logo, yPos, windowWidth, headerCollapse, mbsp; function yScroll() { header = document.getElementById('header'); logo = document.getElementById('logo'); headerCollapse = document.getElementById('headerCollapse'); mbsp = document.getElementById('mbsp'); yPos = window.pageYOffset; windowWidth = $(document).width(); if (yPos > 10) { header.style.height = "69px"; $(headerCollapse).removeClass('container'); $('#logo').addClass('LogoCollapse'); $('.navbar').addClass('mb-navbarCollapse'); if (windowWidth > 768) { //mbsp.style.height = "0px"; } if (windowWidth < 768) { } } else { header.style.height = "186px"; $(headerCollapse).addClass('container'); $('#logo').removeClass('LogoCollapse'); $('.navbar').removeClass('mb-navbarCollapse'); if (windowWidth > 768) { //mbsp.style.height = "186px"; logo.style.width = "137px" logo.style.height = "69px" logo.style.backgroundSize = "137px auto" } if (windowWidth > 1024) { logo.style.width = "160px" logo.style.height = "119px" logo.style.backgroundSize = "160px auto" } if (windowWidth < 768) { } } } window.addEventListener("scroll", yScroll); //Function to the css rule function checkSize(){ if ($(".mqJquery").css("float") == "none" ){ $(function() { var $el, leftPos, newWidth; var $mainNav = $(".nav-tabs"); var activeItem = $(".nav-tabs .active")[0] ? $($(".nav-tabs .active")[0]) : null; var itemLinks = $(".nav-tabs li a"); $mainNav.append("<li id='magic-line'></li>"); var $magicLine = $("#magic-line"); if (activeItem) { $magicLine .width(activeItem.width()) .css("left", activeItem.position().left) .data("orig-left", activeItem.position().left) .data("orig-width", $magicLine.width()); } else { $magicLine.width(0); } itemLinks.hover(function() { $el = $(this); leftPos = $el.parent().position().left; newWidth = $el.parent().width(); if (activeItem == null && $magicLine.position().left === 0) { $magicLine.css("left", leftPos + newWidth / 2); } $magicLine.stop().animate({ left: leftPos, width: newWidth }); }, function() { $magicLine.stop().animate({ left: $magicLine.data("orig-left"), width: $magicLine.data("orig-width") }); }); }); } } // ADD SLIDEDOWN ANIMATION TO DROPDOWN // $('.dropdown').on('show.bs.dropdown', function(e){ $(this).find('.dropdown-menu').first().stop(true, true).slideDown(500, "easeOutBounce"); }); // ADD SLIDEUP ANIMATION TO DROPDOWN // $('.dropdown').on('hide.bs.dropdown', function(e){ $(this).find('.dropdown-menu').first().stop(true, true).slideUp(500, "easeOutBounce"); }); 

 /* Basic styles */ @import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic); html { position: relative; min-height: 100%; } body { background-color:#cfcfcf; font-family: 'Roboto',Arial,Helvetica,sans-serif; } .mqJquery { float:left; } .clearfix { clear: both; } /* Headings */ h1 {} h2 {} h3 {} h4 {} h5 {} h6 {} /* Color Theme */ .mb-bg-red { background-color:#fd100a; } .mb-font-red { color:#fd100a; } .mb-bg-darkgrey { background-color: #3e3e3e; } .mb-red-grid-pattern { background-image: url('img/red-grid-pattern.png'); background-repeat:repeat; } .mb-darkgrey-grid-pattern { background-image: url('img/darkgrey-grid-pattern.png'); background-repeat:repeat; } /* Header styles */ header { background-image: url('img/header-pattern.png'); border-top:4px solid #fd100a; width:100%; height:100px; transition: height 0.2s linear 0s, top 0.2s linear 0s; -webkit-transition: height 0.2s linear 0s, top 0.2s linear 0s; -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ } /* Navbar responsive styles */ .navbar { margin-bottom: 20px; } .nav { margin-bottom: 15px; } .nav-tabs > li > a { border-radius: 0; color: #fff; font-size: 9pt; font-weight:500; -webkit-transition: background-color 150ms linear; -moz-transition: background-color 150ms linear; -o-transition: background-color 150ms linear; -ms-transition: background-color 150ms linear; transition: background-color 150ms linear; } .navbar .open .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover, .nav .open > a, .nav .open > a:focus, .nav .open > a:hover, .nav > li > a:focus, .nav > li > a:hover { background-color: #a41d1d; text-decoration: none; } .nav-tabs > li > a:hover { border-color: #eee #eee #ddd; } .nav-tabs > li { float:none; } .navbar-default, .navbar-default .navbar-collapse, .navbar-default .navbar-form, .nav-tabs { border-color: transparent; } .nav .open > a, .nav .open > a:focus, .nav .open > a:hover, .navbar-default .navbar-toggle { border-color: #a41d1d; } .navbar-default .navbar-toggle .icon-bar { background-color: #a41d1d; } .navbar .open .dropdown-menu { background-color: transparent; border: 0 none; box-shadow: none; float: none; margin-top: 0; position: static; width: auto; } .navbar .open .dropdown-menu > li > a { color:#fff; } .navbar .open .dropdown-menu .dropdown-header { color:#a41d1d; } .navbar .open .dropdown-menu .divider { background-color:#a41d1d; } .nav > li { display: block; position: relative; } .nav > li > a { display: block; } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color: transparent; } /* Animated navbar collapse icon */ .navbar-toggle-fix { padding-left: 12px; padding-right: 8px; } .navbar-toggle .icon-bar { width: 22px; transition: all 0.2s; -webkit-transition: all 0.2s; } .navbar-default .navbar-toggle { position:relative; padding-top:10px; z-index:100 } .navbar-toggle .top-bar { transform: rotate(45deg); -webkit-transform: rotate(45deg); transform-origin: 10% 10%; -webkit-transform-origin: 10% 10%; } .navbar-toggle .middle-bar { opacity: 0; } .navbar-toggle .bottom-bar { transform: rotate(-45deg); transform-origin: 10% 90%; -webkit-transform: rotate(-45deg); -webkit-transform-origin: 10% 90%; } .navbar-toggle.collapsed .top-bar { transform: rotate(0); -webkit-transform: rotate(0); } .navbar-toggle.collapsed .middle-bar { opacity: 1; } .navbar-toggle.collapsed .bottom-bar { transform: rotate(0); -webkit-transform: rotate(0); } /* Content styles */ #content { margin-top: 50px; } /* Footer styles */ footer { position: relative; bottom: 0; width: 100%; height: 448px; background-color: #515151; } /* Layout styles */ #logo { background-image:url('img/logo.png'); height: 67px; width: 90px; background-size: 67px auto; transition:all 0.4s; -webkit-transition:all 0.4s; -o-transition:all 0.4s; -moz-transition:all 0.4s; margin-top:7px; margin-bottom: 11px; } /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { .mqJquery { float:none; } } /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { } /* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { /* Navbar styles */ .navbar { height:64px; padding-left: 30px; padding-right:-30px; position: absolute; top: 150px; -webkit-transition: top 0.3s ease-in-out, width 0.3s ease-in-out; -moz-transition: top 0.3s ease-in-out, width 0.3s ease-in-out; -o-transition: top 0.3s ease-in-out, width 0.3s ease-in-out; -ms-transition: top 0.3s ease-in-out, width 0.3s ease-in-out; transition: top 0.3s ease-in-out, width 0.3s ease-in-out; } .container { -webkit-transition: width 0.5s ease-in-out; -moz-transition: width 0.5s ease-in-out; -o-transition: width 0.5s ease-in-out; -ms-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; } .mb-navbarCollapse { width: 100%; top:0px; background-color: #515151; background-image: url('img/darkgrey-grid-pattern.png'); -webkit-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 1s ease-in-out; -moz-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 1s ease-in-out; -o-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 1s ease-in-out; -ms-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 1s ease-in-out; transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 1s ease-in-out; } .mb-navbarCollapse .nav .open > a, .mb-navbarCollapse .nav .open > a:focus, .mb-navbarCollapse .nav .open > a:hover, .mb-navbarCollapse .nav-tabs > li > a:hover, .mb-navbarCollapse .nav > li > a:focus, .mb-navbarCollapse .nav > li > a:hover, .mb-navbarCollapse .nav-tabs > li.active > a, .mb-navbarCollapse .nav-tabs > li.active > a:focus, .mb-navbarCollapse .nav-tabs > li.active > a:hover { color: #f9131b !important; } .nav { margin-bottom: 0; } #magic-line { background: #3e3e3e none repeat scroll 0 0; top: 0px; height: 0.2em; left: 0; position: absolute; width: 100px; } .nav-tabs { border-bottom: 0 none; } .nav-tabs:hover { border-bottom: 1 none; } .nav .open > a, .nav .open > a:focus, .nav .open > a:hover, .nav-tabs > li > a:hover, .nav > li > a:focus, .nav > li > a:hover, .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border: 0; border-color: transparent; background-color: transparent; color: #3e3e3e; cursor:pointer; padding: 23px 16px; -webkit-transition: color 150ms linear; -moz-transition: color 150ms linear; -o-transition: color 150ms linear; -ms-transition: color 150ms linear; transition: color 150ms linear; } .nav > li > a { padding: 22px 15px; } .nav-tabs > li { float:left; } .navbar .open .dropdown-menu { background-clip: padding-box; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); display: none; float: left; font-size: 14px; left: 0; list-style: outside none none; margin: 0; min-width: 160px; padding: 5px 0; position: absolute; text-align: left; top: 100%; z-index: 1000; } .navbar .open .dropdown-menu > li > a { color: #3E3E3E; } .navbar .open .dropdown-menu > li > a:hover { color: #fff; } /* Header style*/ header { position: fixed; z-index: 1; height: 186px; } #headerCollapse { position: relative; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /* Content styles */ #content { margin-top:20px; } /* Layout styles */ #logo { height: 119px; width: 160px; background-size: 160px auto; margin-top:17px; margin-bottom: 21px; } .LogoCollapse { background-size: 64px auto !important; height: 48px !important; left: 25% !important; margin-top: 7px !important; position: absolute !important; width: 64px !important; z-index: 9999 !important; } } 

 <!DOCTYPE html> <html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="https://getbootstrap.com/favicon.ico"> <title>Muth Bau</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <link href="http://mirsoftware.de/muthbau/css/jquery-ui.min.css" rel="stylesheet"/> </head> <body> <div class="mqJquery"></div> <div class="clearfix"></div> <header id="header"> <div id="headerCollapse" class="container"> <a href="#"><div id="logo"></div></a> <!-- Static navbar --> <nav class="navbar navbar-default navbar-static-top mb-bg-red mb-red-grid-pattern"> <div class="container"> <div class="navbar-header"> <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> </div> <div aria-expanded="false" id="navbar" class="navbar-collapse collapse"> <ul class="nav nav-tabs"> <li class="active"><a href="#">HOME</a></li> <li><a href="#">ÜBER UNS</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SERVICE <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">KONTAKT</a></li> <li><a href="#">IMPRESSUM</a></li> </ul> </div><!--/.nav-collapse --> </div><!--/.container-fluid --> </nav> </div> </header> <div id="mbsp" style="height:186px;"></div> <section id="content" class="container-fluid"> <div class="jumbotron"> <h1>blabla beispiel text</h1> <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> </div> <div class="jumbotron"> <h1>blabla beispiel text</h1> <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> </div> <div class="jumbotron"> <h1>blabla beispiel text</h1> <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> </div> <div class="jumbotron"> <h1>blabla beispiel text</h1> <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> </div> </section> <!-- /content --> <footer class="mb-darkgrey-grid-pattern"> <div class="container"> <p>Place sticky footer content here.</p> </div> </footer> <script src="http://mirsoftware.de/muthbau/js/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> 

Answer 1

您無緣無故地同時對許多元素進行了許多更改。 只使用一個容器來完成所有動畫，讓我們說#headerCollapse ，使用過渡並通過添加.container類來更改它的屬性。

#headerCollapse {
  transition: width 0.5s ease-in-out;
  position:relative;
}
#headerCollapse:not(.container){
  width:100%;
  height: 69px;
}
#headerCollapse.container{
  height: 186px;
}

這樣，只需添加.container類，就可以從全寬和69px高度到.container寬度和186px高度進行#headerCollapse動畫.container 。

接下來要做的是將.navbar在一直保持在#headerCollapse底部並擴展到其寬度的方式中。

.navbar {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
}