1. HTML:

Press Me!

2. CSS:

#btn {
  font-size: 1.5em;
  padding: 0.5em 1em;
  margin-bottom: 1em;
}

#box {
  height: 100px;
  width: 100px;
  background-color: #f00;
  transition: height 0.5s ease-out, transform 0.5s ease-out;
}

3. JavaScript:

const btn = document.getElementById('btn');
const box = document.getElementById('box');

let isPressed = false;

btn.addEventListener('mousedown', () => {
  isPressed = true;
  box.style.height = '200px';
});

btn.addEventListener('mouseup', () => {
  isPressed = false;
  box.style.height = '100px';
  box.style.transform = 'translateY(-50px)';
});

btn.addEventListener('mouseleave', () => {
  if (isPressed) {
    btn.dispatchEvent(new Event('mouseup'));
  }
});

这段代码实现了按下按钮时，div 高度增加为 200px，松开按钮时 div 高度回到 100px，并同时向上移动 50px 的效果。如果用户在按下按钮后移开鼠标，也能够触发 div 的回到原位以及高度的变化。