从下方顺利滑入新的 div

Question

我正在尝试使用 javascript 附加一个新的 div 从屏幕底部向上滑动。我已经查看了 this one and this one but I still can't figure out how to solve my problem. Right now the previous divs are "jumping" up but I want the next one to slide in seamlessly, and for them to move up with it. I would like to be able to do this with CSS animation. Is that possible? Here is a fiddle: http://jsfiddle.net/3fcbfbuu/4/

等问题的旧 SO 答案

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="global-wrap">
  <div class="prewrapper">
    <div class="sentmessage ">
      <div class="messagetext ">
        <div id="conversation1">Message 1</div>
      </div>
    </div>
    <div class="sentmessage ">
      <div class="messagetext ">
        <div id="conversation5">Message 2</div>
      </div>
    </div>
  </div>
  <div class="wrapper" id="wrapper_l">
    <div id="part3" class="sentmessage">
      <div class="messagetext ">
        <div id="conversation2">Message 3</div>
      </div>
    </div>
  </div>
</div>

CSS:

.fullconversation {
  height: 32%;
  width: 100%;
  display: block;
  position: relative;
}
.global-wrap {
  width: 100%;
  position: absolute;
  bottom: 0%;
  overflow: hidden;
}
.prewrapper {
  -webkit-transition: all 2s ease;
}
.wrapper {
  -webkit-transform: translate(0, 200px);
  -webkit-transition: all 2s ease;
  position: absolute;
}
.wrapper.in {
  -webkit-transform: translate(0);
  position: relative;
}
.messagetext {
  display: inline-block;
}
.prewrapper {
  width: 100%;
}
.sentmessage {
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #e3e3e4;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

JS: 设置超时（

  function() {

    $("#wrapper_l").addClass("in");

  }, 1000)

Answer 1

如果您想让其他元素受您的动画影响，请不要使用 translate.. 尝试像这样使用边距：

DEMO

.wrapper {
  margin-bottom:-20px;
  -webkit-transition: margin 2s ease;
  position: absolute;
}
.wrapper.in {
  margin-bottom:0px;
  position: relative;
}

祝你好运。

从下方顺利滑入新的 div

smoothly sliding in a new div from below

html

javascript

css

css-animations