jquery - CSS 从左到右滑动过渡

Question

我一直在寻找解决这个问题的方法。

我正在尝试让 Toggle One 和 Toggle Two 这两个元素彼此紧挨着。当我点击 Toggle One 时，附加到它的导航项应该滑入，同时将 Toggle Two 推到一边。

到目前为止，我已经开始播放动画，但是查看 jsfiddle，您会发现 Toggle 2 会断断续续或向右摆动。

我不确定真正要做什么，而且由于我需要 flexbox，所以我看到的 jQuery 解决方案不起作用。我已经尝试过使用 display: block 和 display: none，但它们只是直接显示出来，所以我不得不使用可见性和不透明度。

宽度也不能设置，因为显示的内容需要根据输入的内容动态显示。

(function($) {
  function toggleNav($thisChild) {
    var $child = $thisChild,
      $toggle = $child.siblings('.toggle');

    if ($toggle.hasClass('opened-nav'))
      $toggle.removeClass('opened-nav');
    else
      $toggle.addClass('opened-nav');

    if ($child.hasClass('open'))
      $child.removeClass('open');
    else
      $child.addClass('open');

  };

  $('#controller-one').on('click', function() {
    $('#controller-two').removeClass('opened-nav');
    $('#nav-two').removeClass('open');
    toggleNav($('#nav-one'));
  })

  $('#controller-two').on('click', function() {
    $('#controller-one').removeClass('opened-nav');
    $('#nav-one').removeClass('open');
    toggleNav($('#nav-two'));
  })
})(jQuery);

p,
li {
  padding: 0 10px;
  font-family: sans-serif;
  font-weight: lighter;
}

.controls {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 55px;
  background: #294251;
}

#controller-one,
#controller-two {
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

#controller-one {
  position: relative;
  z-index: 102;
  background: #294251;
}

#controller-two {
  position: relative;
  z-index: 101;
  background: #294251;
}

.toggle {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 100;
  height: 100%;
  cursor: pointer;
}

#toggle-one {
  background: #4082ca;
}

#toggle-two {
  background: #245e93;
}

.toggle p {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  width: auto;
  color: #fff;
}

.toggle p:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  height: 2px;
}

.navigation {
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: all 0.5s ease-in;
  width: 0;
  height: 100%;
  margin-left: -100%;
}

.navigation.open {
  opacity: 1;
  visibility: visible;
  width: 100%;
  transform: translateX(0);
  margin-left: 0;
}

.navigation ul {
  margin-left: 0;
  padding-left: 0;
}

.navigation li {
  list-style: none;
  float: left;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="controls">
  <div id="controller-one">
    <nav id="toggle-one" class="toggle">
      <p>T One</p>
    </nav>
    <nav class="navigation" id="nav-one">
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
      </ul>
    </nav>
  </div>
  <div id="controller-two">
    <nav id="toggle-two" class="toggle">
      <p>T Two</p>
    </nav>
    <nav class="navigation" id="nav-two">
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
      </ul>
    </nav>
  </div>
</div>

Answer 1

可能这会有所帮助

我对你的工作做了一些更新。

(function($) {
	function toggleNav($thisChild) {
		var $child = $thisChild,
		$toggle = $child.siblings('.toggle');
		
		if ($toggle.hasClass('opened-nav'))
			$toggle.removeClass('opened-nav');
		else
			$toggle.addClass('opened-nav');
		
		if ($child.hasClass('open'))
			$child.removeClass('open');
		else
			$child.addClass('open');
	}

	$('#controller-one').on('click', function() {
		$(this).toggleClass("sub-active").siblings().removeClass("sub-active");
		$('#controller-two').removeClass('opened-nav');
		$('#nav-two').removeClass('open');
		toggleNav($('#nav-one'));
	});
	
	$('#controller-two').on('click', function() {
		$(this).toggleClass("sub-active").siblings().removeClass("sub-active");
		$('#controller-one').removeClass('opened-nav');
		$('#nav-one').removeClass('open');
		toggleNav($('#nav-two'));
	});
})(jQuery);

p, li {
	padding: 0 10px;
	font-family: sans-serif;
	font-weight: lighter;
}
.controls {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	height: 55px;
	background: #294251;
}
#controller-one, #controller-two {
	height: 100%;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	transition: all .4s;
	flex-basis: 3.97em;
	overflow: hidden;
}
#controller-one.sub-active, #controller-two.sub-active {
	flex-basis: 16em;
	-ms-flex-preferred-size: 16em;
}
#controller-one {
	position: relative;
	z-index: 102;
	background: #294251;
}
#controller-two {
	position: relative;
	z-index: 101;
	background: #294251;
}
.toggle {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 100;
	height: 100%;
	cursor: pointer;
}
#toggle-one {
	background: #4082ca;
}
#toggle-two {
	background: #245e93;
}
.toggle p {
	display: flex;
	align-items: center;
	position: relative;
	height: 100%;
	width: 100%;
	color: #fff;
	margin: 0;
}
.toggle p:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: #fff;
	height: 2px;
}
.navigation {
	display: flex;
	flex: 1;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	margin-left: -100%;
	transition: all 0.4s;
}
.navigation.open {
	opacity: 1;
	visibility: visible;
	margin-left: 0;
	transition: all 0.6s;
}
.navigation ul {
	margin-left: 0;
	padding-left: 0;
}
.navigation li {
	list-style: none;
	float: left;
	color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
    <div id="controller-one">
        <nav id="toggle-one" class="toggle">
            <p>T One</p>
        </nav>
        <nav class="navigation" id="nav-one">
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
            </ul>
        </nav>
    </div>
    <div id="controller-two">
        <nav id="toggle-two" class="toggle">
            <p>T Two</p>
        </nav>
        <nav class="navigation" id="nav-two">
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
            </ul>
        </nav>
    </div>
</div>