Question

我的页面上有一些div，从菜单中选择时会从上面下拉。这按预期工作。但是，当元素位于其最终位置并且视口缩小到移动友好视图时，激活下拉菜单会使元素首先跟随菜单的向下移动（正常和正常），但在菜单动画完成后元素快速回到不同的位置。如果有意的话会产生很酷的效果，但不是我希望拥有的效果。效果（首先从菜单中选择后）可以在这里看到：

Janky movements

我正在使用未经编辑的bootstrap.css 3.3.6，其中包含此fiddle

中的自定义CSS

按小提琴编辑器中的移动图标，在小屏幕窗口中打开它。

要重现：运行小提琴，打开菜单中的任何项目，确保存在汉堡包菜单，打开和关闭菜单，同时显示内容。

如果您不希望或无法查看小提琴，那么这是CSS：

    html {
  font-size: 14px;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: black;
}

.navbar {
    background-color: transparent;
    background: transparent;
    border: 0;
}

.navbar li { 
  color: slategrey;
  font-size: 14px;
}

.navbar-collapse#myNavbar {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.collapsing {
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
}

.collapse {
  border: 0;
}

.navbar .dropdown-menu::after{
  border:0;
}

.navbar-header .navbar-collapse {
  border: 0;
}

.navbar.navbar-default {
  padding: 10px 0;
  background: rgba(0, 0, 0, .1);
  border: none;
}
.navbar.navbar-default .navbar-nav > li > a,
.navbar.navbar-default .navbar-brand {
  color: slategrey;
}
.navbar.navbar-default .navbar-collapse {
  border: none;
  box-shadow: none;
}

#name {
  color: white;
}

#center {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#kyrrContainer {
  width: 100px;
  height: 100px;
  position: relative;
}

#overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
}

.panel {
  min-width: 80%;
  height: 75%;
  margin-left: 10%;
  margin-right: 10%;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: -300%;
  position: absolute;
  background: #000;
  box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
  z-index: 11;
  -webkit-transition: all .8s ease-in-out;
  -moz-transition: all .8s ease-in-out;
  -o-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
  /*animation-name: colorTransition;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;*/
}

.panel:target {
  margin-top: 0%;
  background-color: #ffcb00; 
}

.transitionedText p {
      font-size: 18px;
      padding: 10px;
      line-height: 24px;
      color: #fff;
      display: inline-block;
      background: black;
      margin: 10px 0px 0px 10px;
    }

    .transitionedText li {
      list-style-type: hiragana;
    }

    .content h2 {
      font-size: 110px;
      padding: 10px 0px 20px 0px;
      margin-top: 52px;
      color: #fff;
      color: rgba(255,255,255,0.9);
      text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
    }

HTML：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
     <a class="navbar-brand" href="#home"><div id="kyrrContainer"><div id="overlay"><p id="name">K B</p></div></div></a>
      <ul class="nav navbar-nav navbar-right pull-right">
        <li><a href="#music"><span class="glyphicon glyphicon-music"></span> Music</a></li>
        <li><a href="#web"><span class="glyphicon glyphicon-tasks"></span> Web</a></li>
      </ul>
    </div>
  </div>
</nav>
<div id="center">
  <div id="home" class="content">
        <div id="kyrrContainer">
            <div id="overlay"><p id="name">M Y  <br> C O O L <br> P A G E</p></div>
            <div id="slow"></div>
            <div id="fast"></div>
        </div>
    </div>
</div>

<div id="music" class="panel">
  <div class="content transitionedText">
    <p>M Y &nbsp;&nbsp; C O N T E N T</p>
    <ul>
      <li><p>Hello</p></li>
      <li><p>World!</p></li>
      <li><p>wehhhhhhh</p></li>
    </ul>
  </div>
</div>

<div id="web" class="panel">
  <div class="content transitionedText">
    <p>P L E A S E &nbsp;&nbsp; L O O K</p>
    <ul>
      <li><a href="https://www.example.com/" target="_blank"><p>example.com</p></a></li>
    </ul>
  </div>
</div>

任何帮助或指示都非常受欢迎！

Answer 1

使用CSS：before和：after进入新职位。

Answer 2

使用André对:: before和:: after的建议，我这样做了：

.collapse::after {
  content: " \0000a0 ";
}

似乎“hacky”，但产生了理想的结果。它增加了一个

&nbsp;

菜单后。

在this question

的帮助下

这是更新的fiddle

Answer 3

尝试内容：“”看看它是否更好用。此外，如果您对答案感到满意，请将您的问题记录为已回答。 THX

过渡后轻松进入后，CSS可防止元素卡入到位

3 个答案: