[英]smoothly sliding in a new div from below
I am trying to use javascript to append a new div to slide up from the bottom of the screen. 我正在尝试使用javascript追加新的div以从屏幕底部向上滑动。 I have looked at old SO answers to questions like 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. 现在,上一个div正在“跳跃”,但我希望下一个div无缝插入,并让他们向上移动。 I would like to be able to do this with CSS animation. 我希望能够使用CSS动画来做到这一点。 Is that possible? 那可能吗? Here is a fiddle: http://jsfiddle.net/3fcbfbuu/4/ 这是一个小提琴: http : //jsfiddle.net/3fcbfbuu/4/
HTML: 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: 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: setTimeout( JS:setTimeout(
function() {
$("#wrapper_l").addClass("in");
}, 1000)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.