按下按钮时增加 div 高度，然后在释放时向上移动

【问题标题】：Increase div height while button is pressed, then move up on release按下按钮时增加 div 高度，然后在释放时向上移动
【发布时间】：2022-06-10 22:59:47
【问题描述】：

我有一个用 React 渲染的钢琴键盘，我想复制一个尾音效果，它也存在于 Synthesia 中。也就是说，当按下一个键时，应该在键上方呈现一个尾随音符，按下该键时它的高度会不断增加，一旦释放，尾随音符应该以与其高度增加相同的速度向上移动。

我设法应用了笔记的上移部分：

  componentDidMount(){
    setTimeout(this.applyMoveUp,1)
  }

  applyMoveUp =()=>{
    console.log("apply move up")
    this.ref.current.classList.toggle('trailingNote-moveUp')
  }

这是css：

.trailingNote {
  background:black;
  width:20px;
  transition: transform  5s;
  transition-timing-function: linear;
  }
 
.trailingNote-moveUp{
  transform: translateY(-700px);
}

这会在屏幕上呈现尾随注释并将 trailingNote-moveUp css 类应用到它，因此它一出现在屏幕上就开始向上移动，但它的高度不会增加。

在 React 中如何实现这种效果？

【问题讨论】：

• 我不完全理解这个问题，但是应用另一个过渡到高度有效吗？ transition: transform 5s linear, height 5s linear; 然后在 moveUp 中设置高度？作为旁注，您可以使用 :active 伪类，而不是应用 moveUp 类

标签： css reactjs