html - CSS 防止元素在过渡缓入缓出后卡入到位

Question

我的页面上有一些 div，当从菜单中选择时，它们会从上方下拉。这按预期工作。然而，当元素位于其最终位置并且视口(viewport)已缩小到移动友好 View 时，激活下拉菜单会导致元素首先跟随菜单的向下移动(好的并且可以)，但是在菜单动画完成后元素会弹回到不同的位置。如果有意的话，效果很酷，但不是我想要的。效果(首先从菜单中选择后)可以在这里看到:

我正在使用未经编辑的 bootstrap.css 3.3.6 和在此 fiddle 中找到的自定义 CSS

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

要重现:运行 fiddle，从菜单中打开任何元素，确保存在汉堡菜单，在内容可见时打开和关闭菜单。

如果您不想或不能查看 fiddle ，这里是 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 输入新位置。