Div轉換過程中的其他div左/右

Question

我的HTML 5應用程序出現問題。我想生成一個滑動菜單（響應式），其中左側/右側過渡的第一個面板始終在右側顯示爲100px。

但有一個問題。首先<div>傳過來原來<div> ...

HTML：

<div id="myContainer"> 
    <div class="animate1 animate1-nomove"> 
     <section class="myPanel panel-padding">new new new new new</section> 
    </div> 
    <div class="animate2 animate2-nomove"> 
     <section class="myPanel panel-padding" id="scrolling">original</section> 
    </div> 
</div> 

CSS：

div#myContainer { 
    position: absolute; 
    top: 60px; right: 0; bottom: 60px; left: 0; 
    /* need for sliding menu */ 
    overflow: hidden; 
    border: 1px solid; 
} 

div.animate1 { 
    height: 100%; 
    width: 100%; 
    background-color: #c00; 
    -webkit-transition: 2s ease-in-out; 
    -moz-transition: 2s ease-in-out; 
    -o-transition: 2s ease-in-out; 
    -ms-transition: 2s ease-in-out; 
    transition: 2s ease-in-out; 
    position: absolute; 
} 

div.animate2 { 
    height: 100%; 
    width: 100%; 
    -webkit-transition: 2s ease-in-out; 
    -moz-transition: 2s ease-in-out; 
    -o-transition: 2s ease-in-out; 
    -ms-transition: 2s ease-in-out; 
    transition: 2s ease-in-out; 
    position: absolute; 
} 


/* no move */ 
.animate1-nomove {left: -100%;} 
.animate2-nomove {left: 0px;} 

/* move */ 
.animate1-move {left: 0px; margin-right: 100px;} 
.animate2-move {left: 100%; margin-left: -100px;} 

我的小提琴：http://jsfiddle.net/nKtC6/714/

Answer 1

這算什麼，你正在嘗試做什麼？

http://jsfiddle.net/prollygeek/nKtC6/716/

div.animate1 { 
    height: 100%; 
    width: 100px; 
    background-color: #c00; 
    -webkit-transition: 2s ease-in-out; 
    -moz-transition: 2s ease-in-out; 
    -o-transition: 2s ease-in-out; 
    -ms-transition: 2s ease-in-out; 
    transition: 2s ease-in-out; 
    position: absolute; 
}