问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

侧边栏过渡

社区维基
1
新手上路，请多包涵

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

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

 $('.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。

谢谢。

原文由 raduken 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译jquerycss
阅读 547
2 个回答
得票最新
社区维基
1
✓ 已被采纳

我不确定您的代码到底想要什么，因为您的 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 演示

这里只是首先设置如何默认显示您的元素，然后添加一个类之后您希望如何显示该元素。

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

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

jsfiddle 演示

你在你的帖子中说你的“侧边栏有点像南瓜夹着字母”。

是的，这将是因为你想用宽度制作动画，如果你用宽度制作动画，你就无法避免它。

如果你还想用宽度做动画，用px设置fixed（你也可以通过jquery设置动态px），然后用css宽度为父元素设置动画。喜欢：

jsfiddle 演示

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

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

更新演示和示例 - 鼓膜

揭示

推

w3schools 示例

w3schools - sidenav_push

w3schools 推动的另一种方式

希望有意义

原文由 mlimon 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

嗨，也许试试这段代码 < -- 更新/删除/添加 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>

问候 ：）

原文由 jseezo 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题