CSS Divの幅を左から右にアニメーションする

Question

重複している2つのdivの幅をアニメーション化して、その中に含まれるテキストを表示/非表示にしています。あるdivが左から右にアニメーション化され、もう一方が右から左にアニメートされるようにしたいので、1つのテキストが消去され、もう1つのdivがそれに続いて表示されます。

ここまでは私が今までに得たことのJSフィドルですが、左から右の両方で公開されています。 「キャンセル」を右から左に明らかにするにはどうすればよいですか？

https://jsfiddle.net/a43wrq20/

私は、これらのルールは、それを行うだろうと思ったが、それは私のために働いていません。

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

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

彼らがアニメーション化しているとしても、彼らの両方がわずかにずれますか？誰にでも簡単に解決できるのでしょうか？

ありがとうございます！

Answer 1

から要素の幅をアニメーション化したいか、このですこの場合、右から左に何か問題が発生します。アニメーション要素の子、cancel-textが左揃えになります。それは右からスライドするように見えます。

最も簡単な解決策は、cancel-textのままにしてログインをアニメーション化し、背景色を付けて（キャンセルを隠すように）、絶対位置を与えてください。私の説明が良かった場合は申し訳ありません - 私は

$(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>

Answer 2

私はちょうどright:-110px;に.cancel-text-containerためright:0;値を変更し、.login-text-container.activeleft:10px;へ

ためleft:0;値は、あなたは？：

Updated Fiddle