當寬度發生變化（文字變化）時，平滑地移動居中的物品（文字）

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

而不是淡入淡出正確的部分，你需要淡入淡出整個行。

此外，每個單詞更改不需要單獨的功能。只需要一個接受新詞作爲參數的函數。

最後，不要使用內聯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>