使用 CSS 个动画提升 div 个
Using CSS animations to bump up div's
我有一个 table 的 div 想要制作动画。我想创建一个新的 div 出现在 "bumps up" 之前的 div 中的效果。这是包含三个消息的 fiddle。现在,您可以看到 Message i3 覆盖了 Message 2。相反,我希望 Message 1 和 2 凸起。最简单的方法是什么?我将增加消息 3,并最终添加消息 4、5、6 等。
Fiddle: http://jsfiddle.net/3fcbfbuu/
HTML:
<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>
Javascript:
setTimeout(
function(){
$("#wrapper_l").animate({bottom: '0%'},{duration: 500});
} ,1000)
CSS:
.fullconversation {
height:32%;
width: 100%;
display: block;
position: relative;
}
.prewrapper{
width: 100%;
position: absolute;
bottom: 0%;
}
.wrapper {
width: 100%;
position: absolute;
bottom: -200%;
}
.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;
}
感谢大家的帮助!
与其使用包装器的绝对位置,不如将它们置于正常流中,并使用 CSS3 转换为新添加的消息添加动画效果。
setTimeout(
function() {
$("#wrapper_l").addClass("in");
}, 1000)
.fullconversation {
height: 32%;
width: 100%;
display: block;
position: relative;
}
.global-wrap {
width: 100%;
position: absolute;
bottom: 0%;
overflow: hidden;
}
.prewrapper {
-webkit-transition: all .3s ease;
}
.wrapper {
-webkit-transform: translate(0, 200px);
-webkit-transition: all .3s 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;
}
<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>
我有一个 table 的 div 想要制作动画。我想创建一个新的 div 出现在 "bumps up" 之前的 div 中的效果。这是包含三个消息的 fiddle。现在,您可以看到 Message i3 覆盖了 Message 2。相反,我希望 Message 1 和 2 凸起。最简单的方法是什么?我将增加消息 3,并最终添加消息 4、5、6 等。
Fiddle: http://jsfiddle.net/3fcbfbuu/
HTML:
<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>
Javascript:
setTimeout(
function(){
$("#wrapper_l").animate({bottom: '0%'},{duration: 500});
} ,1000)
CSS:
.fullconversation {
height:32%;
width: 100%;
display: block;
position: relative;
}
.prewrapper{
width: 100%;
position: absolute;
bottom: 0%;
}
.wrapper {
width: 100%;
position: absolute;
bottom: -200%;
}
.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;
}
感谢大家的帮助!
与其使用包装器的绝对位置,不如将它们置于正常流中,并使用 CSS3 转换为新添加的消息添加动画效果。
setTimeout(
function() {
$("#wrapper_l").addClass("in");
}, 1000)
.fullconversation {
height: 32%;
width: 100%;
display: block;
position: relative;
}
.global-wrap {
width: 100%;
position: absolute;
bottom: 0%;
overflow: hidden;
}
.prewrapper {
-webkit-transition: all .3s ease;
}
.wrapper {
-webkit-transform: translate(0, 200px);
-webkit-transition: all .3s 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;
}
<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>