CSS從左至右設置動畫Div寬度

我正在嘗試爲兩個重疊的div設置動畫寬度，以顯示/隱藏其中包含的文本。我想讓一個div從左到右進行動畫製作，另一個從右向左進行動畫製作，這樣一張文字就被擦掉了，另一個文字也隨之顯露出來。CSS從左至右設置動畫Div寬度

這是我到目前爲止的JS小提琴，但它們都是從左到右顯示的。我如何從「從右到左」顯示「取消」？

我認爲，這些規則將做到這一點，但它不是爲我工作：

.foo { 
    right: 0; 
    width: 0; 
} 

.foo.active{ 
    right: 0; 
    width: 120px; 
}

而且，它們都稍微移動，因爲它們可以動畫？任何人都可以看到這個簡單的解決方案？

非常感謝！

來源

2016-10-01 Runny Yolk

從動畫元素的寬度在這種情況下，從左到右引起一些問題，因爲動畫元素子節點cancel-text保持對齊。它會看起來像從右側滑入。

最簡單的解決方法是離開cancel-text，併爲login設置動畫，給它一個背景色（因此它隱藏了取消），給它們一個絕對位置，並且很可能會得到所需的結果（if我這樣做是正確）

$(document).ready(function(){ 
 
    $('.clicker').on("click", function(){ 
 
    // if($('.email.input').val()){ 
 
     $('.email.input').toggleClass('up'); 
 
     $('.password.input').toggleClass('up'); 
 
     $('.signup').toggleClass('up'); 
 
     $('.login').toggleClass('up'); 
 
     $('.login-text-container').toggleClass('active'); 
 
    // } 
 
    }); 
 
});

.center-clicker { 
 
    display: flex; 
 
    width: 100vw; 
 
    height: 50px; 
 
    top: 5vh; 
 
    position: absolute; 
 
} 
 

 
.clicker { 
 
    position: relative; 
 
    margin: auto; 
 
    display: flex; 
 
    align-items: center; 
 
    height: 7.5vh; 
 
    background: none; 
 
} 
 

 
.clicker:hover { 
 
    cursor: pointer; 
 
} 
 

 
.text-container { 
 
    text-align: center; 
 
    height: 100%; 
 
    width: 120px; 
 
} 
 

 
.login-text { 
 
    font-family: "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
    white-space: nowrap; 
 
    font-weight: 100; 
 
    font-size: 2.6em; 
 
    color: black; 
 
} 
 

 
.cancel-text { 
 
    font-family: "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
    font-weight: 100; 
 
    font-size: 2.6em; 
 
    color: black; 
 
} 
 

 
.login-container { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 

 
.login-text-container { 
 
    position: absolute; 
 
    background: white; 
 
    overflow: hidden; 
 
    left: 0; 
 
    width: 0; 
 
    -webkit-transition: width .4s; 
 
    transition: width .4s; 
 
} 
 

 
.login-text-container.active { 
 
    width: 100%; 
 
    -webkit-transition: width .4s; 
 
    transition: width .4s; 
 
} 
 

 
.cancel-container { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 

 
.cancel-text-container { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    width: 100%; 
 
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<div class="center-clicker"> 
 
    <div class="clicker"> 
 
    <div class="text-container"> 
 
     <div class="cancel-container"> 
 
     <div class="cancel-text-container"> 
 
      <span class="cancel-text">cancel</span> 
 
     </div> 
 
     </div> 
 
     <div class="login-container"> 
 
     <div class="login-text-container active"> 
 
      <span class="login-text">&nbsp;log in&nbsp;</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-10-01 17:57:04 LGSon