javascript - react-transition-group 动画的布局中断
问题描述
我正在尝试熟悉react-transition-group
但遇到一些问题。在一个简单的组件中,它显示当前计数器并在输入新值时increment
或decrement
在输入新值时为显示的值设置动画,它会移动前一个值,从而产生突然的效果。这可能是因为具有不透明度的新元素0
进入圆顶并且两个值同时显示。
整个组件如下所示:
import React, { Component } from "react";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import "./App.css";
class App extends Component {
state = {
progress: 0
};
incr = () => {
this.setState({
progress: this.state.progress + 1
});
};
decr = () => {
this.setState({
progress: this.state.progress - 1
});
};
render() {
return (
<div className="App">
<TransitionGroup>
<CSSTransition
in={true}
appear={true}
key={this.state.progress}
timeout={2000}
classNames="slide"
>
<div key={this.state.progress}>{this.state.progress}</div>
</CSSTransition>
</TransitionGroup>
<button onClick={this.decr}>decr</button>
<button onClick={this.incr}>incr</button>
</div>
);
}
}
export default App;
转换类如下所示:
/* slide enter */
.slide-enter {
opacity: 0;
transform: scale(0.97) translateX(5px);
z-index: 1;
}
.slide-enter.slide-enter-active {
opacity: 1;
transform: scale(1) translateX(0);
transition: opacity 3000ms linear 1000ms, transform 3000ms ease-in-out 1000ms;
}
/* slide exit */
.slide-exit {
opacity: 1;
transform: scale(1) translateX(0);
}
.slide-exit.slide-exit-active {
opacity: 0;
transform: scale(0.97) translateX(5px);
transition: opacity 1500ms linear, transform 1500ms ease-out;
}
.slide-exit-done {
opacity: 0;
}
我想实现以下行为:在递增/递减时,当前显示的计数器消失,而新的计数器在当前计数器不存在后淡入。
解决方案
这可能是因为不透明度为 0 的新元素进入圆顶并且两个值同时显示。
是的,就是这样。您可以使用position: absolute
从文档流中删除元素,并且您可能还需要以某种方式补偿从文档流中删除这些元素的事实。
<TransitionGroup>
<CSSTransition
in={true}
appear={true}
key={this.state.progress}
timeout={2000}
classNames="slide"
>
<div className="animating" key={this.state.progress}>
{this.state.progress}
</div>
</CSSTransition>
</TransitionGroup>
CSS
.animating {
position: absolute;
}
button:first-of-type {
margin-top: 50px;
}
没有 React 过渡组
JS
import React, { Component } from "react";
import "./App.css";
class App extends Component {
state = {
progress: 0,
transition: "entering" /* entering | exiting */
};
instanceVariables = {
temporaryProgress: 0,
timeoutId: null
};
animate = () => {
clearTimeout(this.instanceVariables.timeoutId);
this.instanceVariables.timeoutId = setTimeout(() => {
this.setState({
progress: this.instanceVariables.temporaryProgress,
transition: "entering"
});
}, 1000);
this.setState({
transition: "exiting"
});
};
incr = () => {
this.instanceVariables.temporaryProgress += 1;
this.animate();
};
decr = () => {
this.instanceVariables.temporaryProgress -= 1;
this.animate();
};
render() {
return (
<div className="App">
<div className={`animate ${this.state.transition}`}>
{this.state.progress}
</div>
<button onClick={this.decr}>decr</button>
<button onClick={this.incr}>incr</button>
</div>
);
}
}
export default App;
CSS
.animate {
transition: opacity 1s linear, transform 1s ease-in-out;
}
.animate.exiting {
transform: translateX(20px);
opacity: 0;
}
.animate.entering {
transform: translateX(0);
opacity: 1;
}
推荐阅读
- azure - 如何为 Azure ML Pipeline Endpoints 创建 Azure 托管 Web 界面
- html -
- 对我不起作用,图标的颜色不起作用
- javascript - 如何在 Jquery 中获取背景图像 URL,然后替换字符串的非 URL 部分
- c# - ElasticSearch NEST searchresponse.hits 数据未填充
- regex - 如何从Python中的文件中删除字符串直到行尾?
- java - 在 onActivityCreated() 中获取 RecyclerView 视图时出错
- css - 为什么第 n 个子颜色在 markdown++ 查看器中不起作用?
- c# - Mongodb C# 驱动程序执行字符串包含对嵌入文档中的属性的查询
- selenium - TestNG中Appium测试用例的顺序执行导致测试用例失败
- r - 在 R 中创建嵌套列表