jQueryによって制御されるCSSのスムーズな移行を行う方法は？

Question

こんにちは私はdivを持っています。私はクリックするとdivをページの中央に移動したいと思います。これを行うために、私はjQuery関数を設定して、cssによる位置付けに影響を与えます。それは動作しますが、スムーズに移行していないので、CSS遷移を追加しても即座に発生します。以下は、私はここで、これまで

を持っている私のコードは、CSSです：ここでは

.footer-active-line { 
    height: 10px; 
    width: 33.3333333333%; 
    -webkit-transition: all .25s ease-in-out; 
    -moz-transition: all .25s ease-in-out; 
    -ms-transition: all .25s ease-in-out; 
    -o-transition: all .25s ease-in-out; 
    transition: all .25s ease-in-out; 
} 

はjQueryのです：このコードは動作します

jQuery(".footer-locations-box2").click(function(){ 
    jQuery(".footer-active-line").css({ 'right': '0px', 'left': '0', 'margin': '0 auto' })   
}); 

、div要素を中心としますが、遷移ありえないがで蹴ります誰もが移行を滑らかにする方法を知っていますか？

ありがとうございます！

Answer 1

にこの変更を試してみてください、CSSの遷移が先のために働くかautoの値は開始されません。何らかの方法で数字にする必要があります。つまり、マージンが自動的に調整されるので、margin: 0 autoを使用しています。これはセンタリングの錯覚を作り出します。基本的にブラウザは、コンテナに合うように両側に同じマージンを設定しています。キャッチされていることは、あなたはすでにその宛先マージンが何であるかを知っていることです。 .footer-active-lineはコンテナの幅の1/3になるように設定されています（width: 33.3333333333%;）。 transform（適用されている要素の幅に相対）を100％で使用するか、余白を33%に設定することができます。これはオフセット親を基準にしています。

jQuery(".footer-locations-box2").click(function(){ 
 
    jQuery(".footer-active-line").css({ transform: 'translateX(100%)' });  
 
});

.footer-active-line { 
 
    background: red; 
 
    
 
    height: 10px; 
 
    width: 33.3333333333%; 
 
    -webkit-transition: all .25s ease-in-out; 
 
    -moz-transition: all .25s ease-in-out; 
 
    -ms-transition: all .25s ease-in-out; 
 
    -o-transition: all .25s ease-in-out; 
 
    transition: all .25s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="footer-active-line"> 
 
</div> 
 

 
<button class="footer-locations-box2">transition</button>

ここで方法2です：ここで

は方法一つだ

jQuery(".footer-locations-box2").click(function(){ 
 
    jQuery(".footer-active-line").css({ margin: '0 33.33333%' });  
 
});

.footer-active-line { 
 
    background: red; 
 
    
 
    height: 10px; 
 
    width: 33.3333333333%; 
 
    -webkit-transition: all .25s ease-in-out; 
 
    -moz-transition: all .25s ease-in-out; 
 
    -ms-transition: all .25s ease-in-out; 
 
    -o-transition: all .25s ease-in-out; 
 
    transition: all .25s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="footer-active-line"> 
 
</div> 
 

 
<button class="footer-locations-box2">transition</button>

Answer 2

あなたのクリックイベントはアニメーションを妨害する可能性があります。私は私のコメントで述べたように、あなたのハンドラ

jQuery(".footer-locations-box2").click(function(e){ 
     e.preventDefault(); 
     jQuery(".footer-active-line").css({ 'right': '0px', 'left': '0', 'margin': '0 auto' })   
    });