单击开关时，如何在2格之间平滑切换？

Question

此开关在我的页面上的两个“页面”（div）顶部：

我现在想做的是当我按下开关时，我需要在开关位于左侧时显示第一个div，而在开关右侧时则显示右侧。

它不仅应该被隐藏和显示，还需要对div像开关一样应用相同的效果，因此要平滑滚动到特定的一侧。

我绝对不知道该怎么做。

var toggle = document.getElementById('container');
var toggleContainer = document.getElementById('toggle-container');
var toggleNumber;

toggle.addEventListener('click', function() {
  toggleNumber = !toggleNumber;
  if (toggleNumber) {
    toggleContainer.style.clipPath = 'inset(0 0 0 50%)';
    toggleContainer.style.backgroundColor = '#D74046';
  } else {
    toggleContainer.style.clipPath = 'inset(0 50% 0 0)';
    toggleContainer.style.backgroundColor = 'dodgerblue';
  }
});

@import url('https://fonts.googleapis.com/css?family=Asap:400,500,700');
body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Asap', sans-serif;
  background: white;
}

a {
  text-decoration: none;
  opacity: .6;
  padding: 60px;
  font-weight: bolder;
  position: absolute;
  right: 0px;
  bottom: 0px;
  font-size: 1.4em;
}

a:hover {
  opacity: 1;
}

#container {
  width: 160px;
  height: 36px;
  margin: auto;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
}

.inner-container {
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  text-transform: uppercase;
  font-size: .6em;
  letter-spacing: .2em;
}

.inner-container:first-child {
  background: #e9e9e9;
  color: #a9a9a9;
}

.inner-container:nth-child(2) {
  background: dodgerblue;
  color: white;
  clip-path: inset(0 50% 0 0);
  transition: .3s cubic-bezier(0, 0, 0, 1);
}

.toggle {
  width: 50%;
  position: absolute;
  height: inherit;
  display: flex;
  box-sizing: border-box;
}

.toggle p {
  margin: auto;
}

.toggle:nth-child(1) {
  right: 0;
}

#page-one {
  background: dodgerblue;
  width: 100%;
  height: 200px;
  margin-top: 20px;
}

#page-two {
  background: rgb(215, 64, 70);
  width: 100%;
  height: 200px;
}

<div class="wrapper">
  <div id="container">
    <div class="inner-container">
      <div class="toggle">
        <p>Private</p>
      </div>
      <div class="toggle">
        <p>Public</p>
      </div>
    </div>
    <div class="inner-container" id='toggle-container'>
      <div class="toggle">
        <p>Private</p>
      </div>
      <div class="toggle">
        <p>Public</p>
      </div>
    </div>
  </div>
  <div id="page-one"></div>
  <div id="page-two"></div>
</div>

Answer 1

执行此操作的一种方法是将内容div绝对定位在彼此的顶部，然后将它们移动到每一侧并隐藏溢出。我敢肯定还有其他方法可以做到，我很乐意看到一些。

这是我的解决方案：

var toggle = document.getElementById("container");
var toggleContainer = document.getElementById("toggle-container");
const toggleContent1 = document.getElementById("page-one");
const toggleContent2 = document.getElementById("page-two");
var toggleNumber;

toggle.addEventListener("click", function() {
  toggleNumber = !toggleNumber;
  if (toggleNumber) {
    toggleContainer.style.clipPath = "inset(0 0 0 50%)";
    toggleContainer.style.backgroundColor = "#D74046";
    toggleContent1.style.transform = "translateX(100%)";
    toggleContent2.style.transform = "translateX(0%)";
  } else {
    toggleContainer.style.clipPath = "inset(0 50% 0 0)";
    toggleContainer.style.backgroundColor = "dodgerblue";
    toggleContent2.style.transform = "translateX(-100%)";
    toggleContent1.style.transform = "translateX(0%)";
  }
});

@import url("https://fonts.googleapis.com/css?family=Asap:400,500,700");
body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Asap", sans-serif;
  background: white;
}

a {
  text-decoration: none;
  opacity: 0.6;
  padding: 60px;
  font-weight: bolder;
  position: absolute;
  right: 0px;
  bottom: 0px;
  font-size: 1.4em;
}

a:hover {
  opacity: 1;
}

.container {
  width: 160px;
  height: 36px;
  margin: auto;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
}

.inner-container {
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  text-transform: uppercase;
  font-size: 0.6em;
  letter-spacing: 0.2em;
}

.inner-container:first-child {
  background: #e9e9e9;
  color: #a9a9a9;
}

.inner-container:nth-child(2) {
  background: dodgerblue;
  color: white;
  clip-path: inset(0 50% 0 0);
  transition: 0.3s cubic-bezier(0, 0, 0, 1);
}

.toggle {
  width: 50%;
  position: absolute;
  height: inherit;
  display: flex;
  box-sizing: border-box;
}

.toggle p {
  margin: auto;
}

.toggle:nth-child(1) {
  right: 0;
}

.content_container {
  margin-top: 2rem;
  width: 100%;
  cursor: initial;
}

.content_inner_container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 200px;
}

.content {
  display: inline;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s cubic-bezier(0, 0, 0, 1);
  padding: 10px;
  color: white;
}

#page-one {
  background: dodgerblue;
  width: 100%;
  height: 200px;
}

#page-two {
  background: rgb(215, 64, 70);
  width: 100%;
  height: 200px;
  transform: translateX(-100%);
}

<div class="wrapper">
  <div id="container" class="container">
    <div class="inner-container">
      <div class="toggle">
        <p>Private</p>
      </div>
      <div class="toggle">
        <p>Public</p>
      </div>
    </div>
    <div class="inner-container" id='toggle-container'>
      <div class="toggle">
        <p>Private</p>
      </div>
      <div class="toggle">
        <p>Public</p>
      </div>
    </div>
  </div>
  <div class="content_container">
    <div class="content_inner_container">
      <div id="page-one" class="content">some content here</div>
      <div id="page-two" class="content">even more content </div>
    </div>
  </div>
</div>

Answer 2

您可以尝试使用JavaScript将显示设置为无，并且只要单击其中任何一个按钮就可以阻止：

function SwapDiv(div1,div2)
{
   d1 = document.getElementById(div1);
   d2 = document.getElementById(div2);
   if( d2.style.display == "none" )
   {
      d1.style.display = "none";
      d2.style.display = "block";
   }
   else
   {
      d1.style.display = "block";
      d2.style.display = "none";
   }
}

var toggle = document.getElementById('container');
var toggleContainer = document.getElementById('toggle-container');
var toggleNumber;

toggle.addEventListener('click', function() {
  toggleNumber = !toggleNumber;
  if (toggleNumber) {
    toggleContainer.style.clipPath = 'inset(0 0 0 50%)';
    toggleContainer.style.backgroundColor = '#D74046';
  } else {
    toggleContainer.style.clipPath = 'inset(0 50% 0 0)';
    toggleContainer.style.backgroundColor = 'dodgerblue';
  }
});

@import url('https://fonts.googleapis.com/css?family=Asap:400,500,700');
body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Asap', sans-serif;
  background: white;
}

a {
  text-decoration: none;
  opacity: .6;
  padding: 10px;
  font-weight: bolder;
  position: absolute;
  right: 0px;
  bottom: 0px;
  font-size: 1.4em;
}

a:hover {
  opacity: 1;
}

#container {
  width: 160px;
  height: 36px;
  margin: auto;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
}

.inner-container {
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  text-transform: uppercase;
  font-size: .6em;
  letter-spacing: .2em;
}

.inner-container:first-child {
  background: #e9e9e9;
  color: #a9a9a9;
}

.inner-container:nth-child(2) {
  background: dodgerblue;
  color: white;
  clip-path: inset(0 50% 0 0);
  transition: .3s cubic-bezier(0, 0, 0, 1);
}

.toggle {
  width: 50%;
  position: absolute;
  height: inherit;
  display: flex;
  box-sizing: border-box;
}

.toggle p {
  margin: auto;
}

.toggle:nth-child(1) {
  right: 0;
}

#page-one {
  background: dodgerblue;
  width: 100%;
  height: 200px;
  margin-top: 20px;
}

#page-two {
  background: rgb(215, 64, 70);
  width: 100%;
  height: 200px;
}

<div class="wrapper">
  <div id="container">
    <div class="inner-container">
      <div class="toggle">
	  <p style="text-align:center; font-weight:bold; font-style:italic;">
<a href="javascript:void(0);" onclick="SwapDiv('page-one','page-two')">Private</a>
</p>  
      </div>
      <div class="toggle">
 <p style="text-align:center; font-weight:bold; font-style:italic; margin:0;">
<a href="javascript:void(0);" onclick="SwapDiv('page-one','page-two')">Public</a>
</p>      
</div>
    </div>
    <div class="inner-container" id='toggle-container'>
      <div id="toggle1">
       <p style="text-align:center; font-weight:bold; font-style:italic;">
<a href="javascript:void(0);" onclick="SwapDiv('page-one','page-two')">Private</a>
</p>  
      </div>
      <div id="toggle2">
         <p style="text-align:center; font-weight:bold; font-style:italic;">
<a href="javascript:void(0);" onclick="SwapDiv('page-one','page-two')">Public</a>
</p>  
      </div>
    </div>
  </div>
  <div id="page-one" style="display:block; margin:0;";></div>
  <div id="page-two" style="display:none";></div>
</div>