CSS動畫，動態左

Question

我現在面臨的問題是：

• 我有一個動畫文本從從右向左推移，這取決於languague把這句話改變，是什麼原因造成的文本的總寬度也改變。

在這張照片，我想要的效果是工作正常，因爲某些屬性是固定的。

現在，當我改變了一個較長的文本問題卡梅斯起來。

所以，這是我現在有：

這是想什麼，我有：

這裏是我使用的代碼：

ReactJS方：

constructor(props) { 
    super(props); 

    this.state = { 
    checked: false 
    } 
} 

componentDidMount() { 
    window.addEventListener('scroll',() => { 
    if (event.srcElement.body.scrollTop >= 1400) { 
     this.setState({ checked: true }); 
    } 
    }); 
} 

render() { 
    return (
    <div> 
     ... stuff 
     <span style={{ fontSize: "40px", color: this.state.theme.COLOR_3 }}> 
     <input type="checkbox" id="Resume-chk" style={{ display: "none" }} checked={this.state.checked} /> 
     <b id="Resume-title">{this.state.languageSet.RESUME}</b> 
     </span> 
     ... more stuff 
    <div> 
); 
} 

CSS方：

//This is the text 
#Resume-title { 
    display: inline-block; 
    -webkit-transition: color 200ms ease-in; 
    -moz-transition: color 200ms ease-in; 
    transition: color 200ms ease-in; 

    -webkit-transition: right 500ms ease-in; 
    -moz-transition: right 500ms ease-in; 
    transition: right 500ms ease-in; 

    position: relative; 
    right: -40.5%; 
} 

//This is the text when the checkbox is checked 
#Resume-chk:checked ~ #Resume-title { 
    right: 40.5%; 
} 

所以，問題是：如何解決呢？或者，也許有一些我錯過的概念，它不僅僅是修復一個錯誤。

而且我不知道，如果做這樣的事情right: -40.5%;和right: 40.5%;是一個很好的做法，但我不能找到一種方法來製作動畫財產像float或align。

當然，如果有辦法解決它，但也有辦法做得更好，這也是值得歡迎的！

編輯：here包含整個HTML部分，從開發者控制檯

Answer 1

複製你需要的定位與權和改造相結合的小提琴。

這是中心的元素，適合您的要求的通常想法：

.container { 
 
    width: 300px; 
 
    background-color: lime; 
 
    margin: 10px; 
 
    position: relative; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    position: relative; 
 
    right: -100%; 
 
    transform: translateX(-100%); 
 
    transition: right 1s, transform 1s; 
 
} 
 

 
.container:hover .item { 
 
    right: 0%; 
 
    transform: translateX(0%); 
 
}

<div class="container"> 
 
    <div class="item">Item</div> 
 
</div> 
 
<div class="container"> 
 
<div class="item">Item long</div> 
 
</div><div class="container"> 
 
    <div class="item">Item longer longer</div> 
 
</div>