使用CSS动画来提升div

时间:2015-03-08 22:51:52

标签: javascript jquery html css css-animations

我有一张div的表格,我试图制作动画。我想创建一个效果,其中一个新的div进入“颠覆”前一个div。这是三个消息的小提琴。现在,您可以看到Message i3覆盖了消息2.相反,我希望消息1和2突然出现。最简单的方法是什么?我将最终提出消息3并最终添加消息4,以及5和6等等。

小提琴: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;
}

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

不是使用包装器的绝对位置,而是将它们放在正常流程中,并使用CSS3 translate为新添加的消息设置动画。

&#13;
&#13;
setTimeout(

  function() {

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

  }, 1000)
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;