使用css过渡从中心向左和向右扩展宽度答案

【问题标题】：Expand width to the left and the right from center with css transition使用css过渡从中心向左和向右扩展宽度
【发布时间】：2023-03-03 09:17:25
【问题描述】：

我想要我的导航栏，它具有固定宽度并且居中，在页面滚动时从其中心向左和向右扩展。目前它只是跳到新的宽度。

我设置了一个演示，您可以看到我正在尝试做什么： http://codepen.io/anon/pen/Qyozvd

（最好看一下codepen上的demo。）

$(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>

【问题讨论】：

警告：您的 codepen 有一点错字：html

标签： jquery html css transition

【解决方案1】：

您无缘无故地同时对许多元素进行了许多更改。只使用一个容器来制作所有动画，比如说#headerCollapse，使用过渡并通过添加.container 类来更改它的属性。

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

这样，您可以将 #headerCollapse 的动画从全宽和 69 像素高度变为 .container 宽度和 186 像素高度，只需向其添加 .container 类即可。

接下来您要做的是将.navbar 定位为始终粘在#headerCollapse 底部并扩展到其宽度。

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

【讨论】：