我面临的问题是:
- 我有一个从右到左的动画文本,该文本会根据语言设置而变化,导致文本总宽度也发生变化的原因。
在这张图片中,我想要的效果很好,因为一些属性是固定的。
现在,当我更改为更长的文本时,问题就出现了。
所以,这就是我现在拥有的:
这就是我想要的:
这是我使用的代码:
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 部分的 fiddle ,从开发控制台复制
最佳答案
您需要结合使用 right 和转换进行定位。
这是根据您的要求调整元素居中的常用想法:
.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>
关于html - 动态从右到左的CSS动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41768526/