CSS-Animation von rechts nach links dynamisch

Question

Das Problem, das ich mit Blick auf bin ist:

• Ich habe einen animierten Text, der von rechts nach links geht, diese Textänderung auf dem languague Satz abhängig, was verursacht, dass die Die Gesamtbreite des Textes ändert sich ebenfalls.

In diesem Bild ist die Wirkung Ich möchte funktioniert gut, weil einige Eigenschaften festgelegt sind.

Nun, wenn ich für einen längeren Text zu ändern Cames das Problem auf.

Also, das ist, was ich habe jetzt:

Und das ist, was ich würde gerne haben:

Hier ist der Code ich benutze :

ReactJS Seite:

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 Seite:

//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%; 
} 

Also, die Frage ist: Wie es zu beheben? Oder vielleicht gibt es ein Konzept, das ich vermisse und es ist ein bisschen mehr, als nur einen Fehler zu beheben.

Auch ich bin nicht sicher, ob Dinge wie right: -40.5%; und right: 40.5%; tun eine gute Praxis ist, aber ich kann nicht einen Weg zu animieren Eigenschaft wie float oder align finden.

Natürlich, wenn es einen Weg gibt, es zu beheben, aber auch gibt es einen Weg, es noch besser zu machen, Es ist auch willkommen !!!

EDITED: here die Geige des ganzen HTML-Abschnitt, kopiert von dev-Konsole

Answer 1

Sie benötigen eine Kombination aus Positionierung mit rechts und einer Transformation enthält.

Dies ist eine übliche Idee für ein Element Zentrierung auf Ihre Anfrage angepasst:

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