我有一个 React 组件代表一个按钮,它根据一些 props
改变内容和颜色。如果表单组件包含此按钮并被提交,则按钮会更改其内容和颜色。这很好用。
现在我想要一个动画(CSS 过渡)来随着按钮内容的变化而变化。 为不同的状态设置明确的宽度
不是一种选择,因为该应用程序是多语言的。使用 max-width
时,动画仅在按钮展开时起作用,而在按钮减小时不起作用。
这是一个带有按钮组件的片段,它每秒更改一次状态。就像在真实组件中一样,这个组件使用 Bootstrap btn
类:
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {status: 0};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
tick() {
let status = this.state.status;
status++;
if(status >= 2) {
status = 0;
}
this.setState({
status: status
});
}
render() {
const btnClass = this.state.status ? 'primary' : 'secondary';
return (
<button className={`btn btn-${btnClass}`} type='button'>
{this.state.status ? this.props.large : this.props.short}
</button>
);
}
}
// Render it
ReactDOM.render(
<Button large='This is a long button you can click on!' short='short'/>,
document.getElementById('react')
);
.btn {
-webkit-transition: width 1s; /* Safari */
transition: max-width 1s;
width: auto;
}
.btn-primary {
max-width: 300px;
}
.btn-secondary {
max-width: 50px;
}
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
如何为不断变化的 width
制作动画(当按钮再次变小时)?
请考虑到答案不一定只与 CSS 相关。我考虑过 react 组件计算它的宽度,然后将它设置在 componentWillMount
函数中,但这也不起作用......
最佳答案
尝试将 width: 100%
设置为 .btn
类。动画化 max-width
属性没有错。当文本从小文本变为大文本时,浏览器将不得不重新计算 auto
的含义作为 width
属性的值,就会出现问题。似乎 100%
的工作方式不同。
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {status: 0};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
tick() {
let status = this.state.status;
status++;
if(status >= 2) {
status = 0;
}
this.setState({
status: status
});
}
render() {
const btnClass = this.state.status ? 'primary' : 'secondary';
return (
<button className={`btn btn-${btnClass}`} type='button'>
{this.state.status ? this.props.large : this.props.short}
</button>
);
}
}
// Render it
ReactDOM.render(
<Button large='This is a long button you can click on!' short='short'/>,
document.getElementById('react')
);
.btn {
-webkit-transition: width 1s; /* Safari */
transition: max-width 1s;
width: 100%;
}
.btn-primary {
max-width: 300px;
}
.btn-secondary {
max-width: 50px;
}
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
关于javascript - React/CSS - 当宽度为自动时,内容更改后动画按钮宽度调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51893835/