边栏过渡

det 发布于 4 天前 css 最后更新 4 天前 2 浏览

我做了一个带转换效果的边栏菜单。 问题是,当我点击图标侧边栏有点南瓜夹心字母。

$('.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。 谢谢。
已邀请:

fet

赞同来自:

我不确定你的代码到底想要什么,因为你的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
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
w3schools - sidenav_push Another way w3schools push 希望它有意义

sit_in

赞同来自:

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

<script>
var o =document.getElementById("one");
var to =document.getElementById("two");
to.style.display = 'none';
function openNav() {
document.getElementById("mySidenav").style.width = "150px";
document.getElementById("main").style.marginLeft = "150px";
o.style.display = 'none';
to.style.display = '';
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
 document.getElementById("main").style.marginLeft= "0";
 o.style.display = '';
 to.style.display = 'none';
}
</script>
看到下面的小提琴。我看到你的效果“REVEAL”并尝试类似的东西,希望它能为你工作或帮助你修改更多。是的,请添加css作为你的愿望我只是添加了我自己你可以自定义它作为你的还有Js代码 sidebarfiddle
If the link breaks again please let me know I will post the whole code

csequi

赞同来自:

嗨也许试试这个代码< - 更新/删除/添加DOM元素 - >

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>
问候 :)

lsint

赞同来自:

首先,您可以在侧栏上设置position: absolute,将其从元素流中删除,然后设置z-index: -1,使其内容不足。接下来,您可以在内容上使用width: 100vw,因此当您使用转换内容时不会受到影响,您只需创建一个transform: translateX()类并在点击时切换它。 我还添加了一个伪元素的暗淡效果,它会在点击时改变其不透明度,这里重要的是设置pointer-events: none,这样你就可以点击按钮。

$('button').click(function() {
  $('.content').toggleClass('move');
})
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;
}
<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>

yet

赞同来自:

如果使用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添加到翻译价值。

gut

赞同来自:

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

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;
}
<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>
我完全放弃了Bootstrap的使用,但原理相同。顶部有一个复选框,然后是#sidebar,然后是#main内容。在主要内容中,有一个标签链接到复选框(使用本机HTML)。单击它时,复选框将被选中,我在CSS中使用了该复选框
#sidebarCheckbox:checked ~ #main{
  transform: translateX(200px);
}
它将转到主要内容,并告诉它将200px向右翻译,这是我制作侧边栏的宽度。当然,您可以根据需要更改此设置。 希望这可以帮助

killo

赞同来自:

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

 .sidebar-left-nav {
-webkit-transition: width 0.3s;
transition: width 0.3s;
width: 100%; 
}
然后把:
.magic-container.closed .sidebar-left-nav {
width: 0;
padding: 0;
}
当然,您需要添加更多样式进行定位等。 祝你好运!