我做了一个带有过渡效果的侧边栏菜单。
问题是，当我单击图标时，侧边栏有点挤压夹着字母。
$('.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>我试图存档的是这里的效果:http://tympanus.net/Development/SidebarTransitions/
我尝试了translate3d，但没有成功，有人知道如何解决这个问题吗？
编辑:如果可能的话，我想保留代码并仅使用 css。
谢谢。
最佳答案
我不确定你的代码到底想要什么，因为你的 CSS 不够好。使用您的js，您只需切换封闭类，因此您必须使用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;
}
You said on your post that your "sidebar kinda squash sandwiching letters".
是的，这将是因为你想要用宽度制作动画，如果你用宽度制作动画，你就无法避免它。
如果您仍然想使用宽度进行动画处理，请使用 px 设置固定(您也可以通过 jquery 设置动态 px)，然后使用 css 宽度对父元素进行动画处理。像:
<强> jsfiddle demo
问，还有其他问题要问您吗？您使用此代码部分的目的是什么？
.magic-container.closed .col-md-10 {
-webkit-transition: width 0.3s;
transition: width 0.3s;
width: 100%;
}
Update demos and example - tympanus
<强> Reveal
<强> Push
w3schools examples
<强> Another way w3schools push
希望它有意义
关于jquery - 侧边栏过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39705371/