Question

有人帮我做出姿势

我正在尝试使“开始”和“停止”按钮动画化，简单地淡入淡出动画。在此屏幕截图中，我正在显示“开始”按钮，并且还有“停止”按钮。

只有一个按钮时，动画效果完美但是，当我尝试在两个按钮上都执行此操作时，动画就不会出现。我只想在开始/停止按钮上应用它。当我应该单击“开始”按钮时，“开始”按钮应淡出，“停止”按钮应淡入。当我单击“停止”按钮时，“停止”按钮应淡出，“开始”按钮应在淡入。

这是我的反应姿势代码

const Playbutton = React.forwardRef((props, ref) => (
<div ref = {ref}>
<button className={styles.blueCircle}> 
<div className={styles.playTriangle}> </div>
</button>
</div>
));
const PosedStopComponent = posed(Playbutton)({
open: {
opacity:1
},
closed: {
opacity:0
}
});

const StopButton = React.forwardRef((props, ref) => (

<div ref = {ref}>
  <button className={styles.greyCircle}> 
    <div className={styles.greyRectangle}></div> 
  </button>
</div>
  ));

  const PosedStartComponent = posed(StopButton)({
open: {
  opacity:0
},
closed: {
  opacity:1
}
  });

我正在从反应姿势创建2个组件，一个用于开始按钮，另一个用于停止按钮然后在渲染中，我做

var whatToShowAmongStartStopButton = this.state.startButton? 
<PosedStopComponent pose = {this.state.startButton ? "open" : 
"closed"}/>:<PosedStartComponent pose = {this.state.startButton ? 
"open" : "closed"}/>

我希望开始/停止按钮应该随着淡入/淡出效果而过渡。

如何在“开始/停止”按钮上使用反应姿势动画？

0 个答案: