CSSアニメーションは、動的に

Question

私が直面してる問題がある：

• 私は、ことを引き起こしているものをlanguagueセットに応じて、このテキストの変更を、右から左に行くアニメーションテキストを持っていますテキストの全幅も変わります。この絵で

いくつかのプロパティが固定されているので、私が欲しい効果は、正常に動作しています。今、私は問題がアップcames長いテキストを変更したときに

。

だから、これは私が今持っているものです。

そして、これは私が持っているしたいものです。ここで

は、私が使用しているコードです。 ：

リアクタンス：

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のようなプロパティをアニメーション化する方法を見つける傾けます。

もちろん、それを修正する方法があるだけでなく、それをさらに良くする方法がある場合は、それも歓迎です！ EDITED

：hereあなたは右と変換との位置の組み合わせを必要とするのdevのコンソール

Answer 1

からコピーされた全体のhtmlセクションを含むフィドル。

これはあなたの要求に適応要素をセンタリングするための通常のアイデア：

.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>