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

时间：2016-02-16 11:31:32

标签： jquery html css css3 transition

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

我设置了一个演示程序，您可以看到我尝试做的事情： http://codepen.io/anon/pen/Qyozvd

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

＆＃13;
＆＃13; 
Timestamp
＆＃13; 
$(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");
});
＆＃13; 
/* 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;
	}

}
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您无缘无故地同时对许多元素进行了许多更改。只使用一个容器来完成所有动画，让我们说#headerCollapse，只需添加.container类就可以使用过渡并更改它的属性。

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

这样，只需向#headerCollapse类添加.container，就可以.container设置从全宽和69px高度到.navbar宽度和186px高度的动画。

您要做的下一件事是将#headerCollapse放置在始终固定在.navbar { position:absolute; left:0; right:0; bottom:0; } 底部并扩展到其宽度的位置。

/page.html#A
相关问题
最新问题