幅が変更されたときに中央揃えのアイテム（テキスト）をスムーズに移動

Question

幅が変更されたときに中央揃えのアイテムをスムーズにシフトさせる方法があるかどうか疑問でしたか？

私のケースでは、左に同じテキストが残っていて、右のテキストはあなたのページに応じて変わります。

<div id="title-container"> 
    <h1 class="inline-header">example.</h1> 
    <h1 id="title-category" class="inline-header">start</h1> 
</div> 

これにより、この幅が変更され、突然シフトします。

ここに問題を示すjsfiddleがあります。

https://jsfiddle.net/sm3j26aa/3/

私は現在ただ相対的な位置を使用して変換し、私はスムーズな移行を得ることができる場合、私はむしろそれを行うだろう左側を固定することにより、その周りに働いてきました。

ありがとうございました！

Answer 1

右側の部分だけをフェードアウトする代わりに、ライン全体をフェードインする必要があります。

また、単語を変更するたびに個別の機能は必要ありません。新しい単語をパラメータとして受け入れる関数を1つだけ持ちます。

最後に、インラインHTMLイベント属性を使用してイベントハンドラを設定しないでください。それ：

• は
• を読み取ることがより困難であるスパゲッティコードが機能
• 内 を結合thisを変更する匿名のラッパー関数は、W3C DOMでも規格

に従っていません作成し、作成します代わりにJavaScriptでイベントハンドラを設定してください。

var $titleContainer = $('#title-container'); 
 
var $titleCategory = $('#title-category'); 
 

 
$("button").click(function(){ change(this.textContent); }) 
 

 
function change(text) { 
 
    $titleContainer.fadeOut(300, function() { 
 
    $titleCategory.text(text); 
 
    $titleContainer.fadeIn(600); 
 
    }) 
 
}

#title-container, #button-container { text-align: center; } 
 
.inline-header { display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="title-container"> 
 
    <h1 class="inline-header left">example.</h1> 
 
    <h1 id="title-category" class="inline-header">start</h1> 
 
</div> 
 
<div id="button-container"> 
 
    <button>Sample</button> 
 
    <button>Hello</button> 
 
    <button>SampleX2</button> 
 
</div>

Answer 2

var $titleCategory = $('#title-category'); 
 

 
function changeToSample() { 
 
    $titleCategory.fadeOut(300, function() { 
 
    $titleCategory.text('sample'); 
 
    $titleCategory.fadeIn(600); 
 
    document.getElementById('title-container').style.marginLeft = `calc(50% - 14em/2)`; 
 
    }) 
 
} 
 

 
function changeToHello() { 
 
    $titleCategory.fadeOut(300, function() { 
 
    $titleCategory.text('hello'); 
 
    $titleCategory.fadeIn(600); 
 
    document.getElementById('title-container').style.marginLeft = `calc(50% - 12em/2)`; 
 
    }) 
 
} 
 

 
function changeToDoubleSample() { 
 
    $titleCategory.fadeOut(300, function() { 
 
    $titleCategory.text('samplesample'); 
 
    $titleCategory.fadeIn(600); 
 
    document.getElementById('title-container').style.marginLeft = `calc(50% - 20em/2)`; 
 
    }) 
 
}

#title-container { 
 
    margin-left: calc(50% - 12em/2); 
 
    transition: .2s; 
 
} 
 

 
#button-container { 
 
    text-align: center; 
 
} 
 

 
.inline-header { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="title-container"> 
 
    <h1 class="inline-header">example.</h1> 
 
    <h1 id="title-category" class="inline-header">start</h1> 
 
</div> 
 
<div id="button-container"> 
 
    <button onclick="changeToSample();">Sample</button> 
 
    <button onclick="changeToHello();">Hello</button> 
 
    <button onclick="changeToDoubleSample();">SampleX2</button> 
 
</div>