实现盒子内H1标签平滑左移动画，替换悬停为点击触发

要实现点击触发盒子展开，同时让H1平滑滑到左侧，需要做以下几处修改：

1. 替换hover触发为点击触发：通过JavaScript给盒子绑定点击事件，切换自定义的.active类，用这个类控制展开状态
2. 实现H1平滑滑动：text-align属性不支持过渡动画，改用margin-left控制位置并添加过渡属性，实现平滑移动效果

以下是修改后的完整代码：

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
<div class="coolbutton">
  <h1>HEADING</h1>
</div>
  </body>
<style>
.coolbutton{
  width: 250px;
  height:55px;
  background-color: black;
  border:solid;
  border-radius: 25px;
  margin: 10px;
  margin-bottom: 0px;
  text-decoration: underline 2px rgba(255, 255, 255, 0);
  transition: width 1s, height 1s, border-radius 1s, text-decoration 1s;
  cursor: pointer; /* 添加鼠标指针样式，提示可点击 */
}
/* 用.active类替代hover伪类，控制展开状态 */
.coolbutton.active{
  height: 150px;
  width: 300px;
  border-radius: 15px;
  text-decoration: underline 2px rgba(255, 255, 255, 1);
}
.coolbutton h1{
  color:white;
  font-size: 30px;
  margin: 5px auto 0;
  text-align: center;
  /* 添加过渡属性，实现平滑移动 */
  transition: margin-left 1s ease;
}
/* 激活状态下调整H1的margin-left，实现左滑效果 */
.coolbutton.active h1{
  margin-left: 20px; /* 可根据需求调整左侧间距 */
}
</style>
<script>
// 绑定点击事件，切换.active类实现展开/收起切换
document.querySelector('.coolbutton').addEventListener('click', function() {
  this.classList.toggle('active');
});
</script>
</html>

关键修改说明： #

• 给.coolbutton添加cursor: pointer，明确提示用户该元素可点击
• 新增.coolbutton.active类，替代原有的:hover伪类，统一控制展开后的样式变化
• 给H1标签添加过渡属性，让位置变化过程平滑自然
• 用JavaScript的classList.toggle()方法，实现点击一次展开、再点击一次收起的交互逻辑

内容的提问来源于stack exchange，提问作者Galaxy Master88