示例：使用

Question

我做了一个带有过渡效果的侧边栏菜单。

问题是，当我点击图标时，侧边栏有点夹着字母。

$('.fa-bars').on('click', function clickHandler(e) {
  e.preventDefault();
  $('.magic-container').toggleClass('closed');
});

.sidebar-shrink {
  height: 100%;
  overflow-y: auto;
  background: #000;
}
.magic-container.closed .sidebar-left-nav {
  -webkit-transition: width 0.3s;
  transition: width 0.3s;
  width: 0;
  padding: 0;
}
.magic-container.closed .col-md-10 {
  -webkit-transition: width 0.3s;
  transition: width 0.3s;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="container-fluid magic-container">
    <div class="col-md-2 sidebar-left-nav">
      <div class="sidebar-shrink">
        <ul>
          <li>
            <a href="#">Hello World<i class="pull-right  fa fa-bullhorn" aria-hidden="true"></i></a>
          </li>
          <li>
            <a href="#">Hello World<i class="pull-right  fa fa-bullhorn" aria-hidden="true"></i></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-md-10">
      <div>
        <h3 class="headline-primary">
     	 		<i class="fa fa-bars pull-left menu-toggle" aria-hidden="true"></i>
     	 		 Sidebar
     	    </h3>
        <div class="col-md-12">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
      </div>
    </div>
  </div>

我试图归档的是这个效果REVEAL从这里：http://tympanus.net/Development/SidebarTransitions/

我尝试过translate3d但是没有用，有人知道如何解决这个问题吗？

编辑：我想保留代码并尽可能使用css。

感谢。

Answer 1

如果使用width属性为侧边栏设置动画，则会折叠字母。唯一的方法是将另一个子div添加到侧边栏并添加侧边栏父溢出隐藏。

但我认为这就是你要做的事情：

$('.fa-bars').on('click', function clickHandler(e) {
  e.preventDefault();
  $('body').toggleClass('sidebar-open');
});

.product-categories{
  width: 100%;
  float:left;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.sidebar-shrink {
  height: 100%;
  overflow-y: auto;
  background: #000;
}

.magic-container .sidebar-left-nav {
  width : 300px;
  -webkit-transition : all .3s;
  transition : all .3s;
  position : absolute;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  position: absolute;
  left : 0;
  top : 0;
  height : 100%;
}

body.sidebar-open .sidebar-left-nav {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

body.sidebar-open .col-md-10{
  -webkit-transform: translateX(300px);
  -moz-transform: translateX(300px);
  -ms-transform: translateX(300px);
  -o-transform: translateX(300px);
  transform: translateX(300px);
}

.magic-container .col-md-10 {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="container-fluid magic-container">
    <div class="col-md-2 sidebar-left-nav">
      <div class="sidebar-shrink">
        <ul>
          <li>
            <a href="#">Hello World<i class="pull-right  fa fa-bullhorn" aria-hidden="true"></i></a>
          </li>
          <li>
            <a href="#">Hello World<i class="pull-right  fa fa-bullhorn" aria-hidden="true"></i></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-md-10">
      <div>
        <h3 class="headline-primary">
     	 		<i class="fa fa-bars pull-left menu-toggle" aria-hidden="true"></i>
     	 		 Sidebar
     	    </h3>
        <div class="col-md-12">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
      </div>
    </div>
  </div>

我在边栏上添加了静态宽度。如果你不想这样做。你需要使用window.getComputedStyle（）。并通过javascript将colFd-10的翻译价值添加到col-md-10。

Answer 2

我尝试了一些东西，希望它能帮助你避免我添加它的脚本因为面临一些问题添加小提琴链接

public class ListHelper<E> {

    public List<E> list =  Collections.synchronizedList(new ArrayList<E>());

    public synchronized boolean putIfAbsent(E x){
        boolean absent = !list.contains(x);
        if(absent)
            list.add(x);
        return absent;
    }

    //Not synchronized as this method assumes it is not necessary because the list itself is synchronized but doesn't help as above method and this method lock on different objects.
    public void add(E x){
        list.add(x);
    }
    //...Other list methods but no synchronized keyword as above
}

请参阅下面的小提琴。我看到了您的效果＆＃34; REVEAL＆＃34; 并尝试这样的希望它可以为您工作或帮助您修改更多。是的，请添加css作为您的愿望我只是自己添加你可以自定义它和你的Js代码

sidebarfiddle

如果链接再次中断，请告诉我我将发布整个代码

Answer 3

我不确定你的代码到底想要什么，因为你的css不够好。和你的js一样，你只需toggle封闭课程，所以你必须用css制作动画。

使用css更容易，你必须设置第一个css，无论你想要什么，你保留动画，切换你的课程。

示例：使用

从左侧滑动

.sidebar-left-nav {
  -webkit-transform: translate3d(-100%, 0px, 0px);
  transform: translate3d(-100%, 0px, 0px);
  visibility: visible;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}
.closed .sidebar-left-nav {
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  visibility: visible;
}

<强> jsfiddle demo

这里首先设置如何默认显示元素，并在添加类之后如何显示该元素。

您也可以通过以下其他方式执行此操作：

.sidebar-left-nav {
  left: -100%;
  position:relative;
  visibility: visible;
  transition: all 0.5s ease 0s;
}
.closed .sidebar-left-nav {
  left: 0;
  visibility: visible;
}

jsfiddle demo

你在帖子上说你的“侧边栏有点挤压了字母”。

是的，因为你想要宽度动画，你无法避免它，如果你用宽度做动画。

如果您仍希望使用宽度设置动画，请使用px设置固定（您也可以通过jquery设置动态px），然后使用css宽度设置父元素的动画。像：

<强> jsfiddle demo

Q，还有更多问题要问你？您使用此代码的部分目的是什么？

.magic-container.closed .col-md-10 {
  -webkit-transition: width 0.3s;
  transition: width 0.3s;
  width: 100%;
}

更新演示和示例 - 鼓室

<强> Reveal

<强> Push

w3schools的例子

<强> w3schools - sidenav_push

<强> Another way w3schools push

希望有意义

Answer 4

首先，您可以在侧栏上设置position: absolute以将其从元素流中移除，并设置z-index: -1以使其内容不足。接下来，您可以对内容使用width: 100vw，因此当您使用转化内容时不会受到影响，您只需创建一个transform: translateX()的课程，然后点击即可切换。

我还添加了一个伪元素的暗淡效果，它会在点击时改变其不透明度，这里重要的是设置pointer-events: none，这样你就可以点击按钮了。

＆＃13;

$('button').click(function() {
  $('.content').toggleClass('move');
})

＆＃13;

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}
.sidebar {
  width: 200px;
  height: 100vh;
  background: lightblue;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.content {
  background: white;
  min-height: 100vh;
  width: 100vw;
  transition: all 0.3s ease-in;
  position: absolute;
}
.content:before {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  pointer-events: none;
  background: black;
  transition: all 0.3s ease-in;
  opacity: 0;
  left: 0;
  top: 0;
}
.move {
  transform: translateX(200px);
}
.content.move:before {
  opacity: 0.4;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">lorem ipsum</div>
<div class="content">
  <button>Sidebar</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore odio consectetur suscipit, iusto accusantium, aspernatur quia possimus debitis enim similique veniam voluptatem iste soluta, vitae officia quos earum quaerat reprehenderit.</p>
</div>

＆＃13;

Answer 5

问题是，当侧边栏父级具有“已关闭”类时，您只将过渡和宽度设置为侧边栏。所有你需要的是将转换样式放到侧边栏，当父级没有“关闭”类时，如下所示：

 .sidebar-left-nav {
-webkit-transition: width 0.3s;
transition: width 0.3s;
width: 100%; 
}

然后说：

.magic-container.closed .sidebar-left-nav {
width: 0;
padding: 0;
}

当然，您需要添加更多样式以进行定位等。祝你好运！

Answer 6

只是将一个仅限CSS的解决方案放入一堆，我创建了一个带复选框的版本。这种方式很快，无需JavaScript即可使用

＆＃13;

html,body{
  height: 100%;
}
body{
  margin: 0;
  font-family: "Lato", sans-serif;
  overflow-x: hidden;
}
#sidebarCheckbox{
  display: none;
}
#sidebarCheckbox:checked ~ #main{
  transform: translateX(200px);
}
#sidebar{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  padding: 8px 0;
  background: #000;
}
#sidebar ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#sidebar a{
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  color: #05F;
}
#sidebar i.fa-bullhorn{
  float: right;
}
#main{
  position: relative;
  min-height: 100%;
  padding: 16px;
  background-color: #FFF;
  transition: transform .3s ease;
}
label[for="sidebarCheckbox"]{
  font-size: 30px;
  cursor: pointer;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<input type="checkbox" id="sidebarCheckbox" />
<div id="sidebar">
  <ul>
    <li><a href="#">Hello<i class="fa fa-bullhorn" aria-hidden="true"></i></a></li>
    <li><a href="#">Hello<i class="fa fa-bullhorn" aria-hidden="true"></i></a></li>
  </ul>
</div>
<div id="main">
  <label for="sidebarCheckbox" style="">&#9776; SideBar</label>
</div>

＆＃13;

我完全放弃使用Bootstrap，但它的原理相同。顶部有一个复选框，然后是#sidebar，然后是#main内容。在主要内容中，有一个标签链接到复选框（使用本机HTML）。单击它时，复选框将被选中，我在CSS中使用了

#sidebarCheckbox:checked ~ #main{
  transform: translateX(200px);
}

它将转到主要内容，并告诉它将200px向右翻译，这就是我制作侧边栏的宽度。当然，你可以根据需要改变它。

希望这有帮助

Answer 7

嗨也许试试这段代码＆lt; - 更新/删除/添加DOM元素 - ＆gt;

var clSideBar = $('.magic-container .sidebar-left-nav').clone();
var ctMagic = $('.magic-container');
var sideBarLeft = $('.magic-container .sidebar-left-nav');
var btnBars = $('.magic-container .fa-bars');

sideBarLeft.remove(); // Remove sidebar nav
 
btnBars.on('click', function clickHandler(e) {
   e.preventDefault();
   ctMagic.toggleClass('closed');
 
    if(clSideBar && ctMagic.hasClass('closed')) {
         setTimeout(function(){
             clSideBar.remove();
       }, 600);
   } else {
      clSideBar.prependTo(ctMagic);
      clSideBar.addClass('timeout');
       setTimeout(function(){
              clSideBar.removeClass('timeout');
       }, 5);
   }

});

.magic-container .sidebar-left-nav {
  width:180px;
  margin-left:0px;
  position:fixed;
  z-index:1;
  left:0px;
  top:0px;
  padding: 0;
  height:100%;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
  overflow-x: hidden;
}
.magic-container .sidebar-left-nav.timeout {
  width:0px;
}
.magic-container .cont-main {
  margin-left:180px;
  -webkit-transition: margin-left 0.5s;
  transition: margin-left 0.5s;
}
 
.magic-container.closed .sidebar-left-nav {
  width: 0px;
}
.magic-container.closed .cont-main {
  margin-left:0px;
}
.magic-container .menu-toggle {
   cursor:pointer;
}
.sidebar-shrink {
  height: 100%;
  width:180px;
  background: #000;
  padding: 0px;
}
.sidebar-shrink a {
   display:block;
   padding: 8px 8px 8px 32px;
   text-decoration: none;
   font-size: 17px;
   white-space:nowrap;
}
.sidebar-shrink ul {
    padding-left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="container-fluid magic-container closed">
    <div class="col-md-2 sidebar-left-nav">
      <div class="sidebar-shrink">
        <ul>
          <li>
            <a href="#">Hello World<i class="pull-right  fa fa-bullhorn" aria-hidden="true"></i></a>
          </li>
          <li>
            <a href="#">Hello World<i class="pull-right  fa fa-bullhorn" aria-hidden="true"></i></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-md-10 cont-main">
      <div>
        <h3 class="headline-primary">
     	 		<i class="fa fa-bars pull-left menu-toggle" aria-hidden="true"></i> Sidebar
     	    </h3>
        <div class="col-md-12">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
      </div>
    </div>
  </div>

问候：）

边栏过渡

7 个答案:

示例：使用