嘿，作为编程新手能自己尝试动画效果已经很棒啦！现在咱们把代码改成点击特定文本才触发图片的显示/动画，一步步来：

第一步：先给你的“特定文本”加个标识 #

首先在HTML里，你需要有一段用来触发点击的文本，给它一个专属类名方便JS选中：

<!-- 这就是你要让用户点击的特定文本 -->
<p class="trigger-text">点击我显示图片</p>

<!-- 你的图片容器（原来的reveal-box） -->
<div class="reveal-box">
  <img src="你的图片地址" alt="要显示的图片">
</div>

第二步：修改JavaScript代码，只监听特定文本的点击 #

原来的代码是点击整个页面都会触发动画，现在咱们把事件绑定到那个特定文本上，同时适配“点击触发显示”的需求：

// 选中触发点击的特定文本
const triggerText = document.querySelector('.trigger-text');
// 选中图片容器
const revealBox = document.querySelector('.reveal-box');

// 定义触发动画/显示图片的函数
function animate() {
  // 切换显示/隐藏状态：如果当前显示就隐藏，反之则显示
  if (revealBox.classList.contains('enter')) {
    revealBox.classList.remove('enter');
    revealBox.classList.add('leave');
  } else {
    revealBox.classList.remove('leave');
    revealBox.classList.add('enter');
  }
}

// 只给特定文本绑定点击事件，不再绑定整个body
triggerText.addEventListener('click', animate);

新手友好小提示 #

• 如果需要初始状态图片是隐藏的，记得在CSS里设置默认样式：

.reveal-box {
  /* 初始隐藏状态 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease; /* 平滑过渡动画 */
}
.reveal-box.enter {
  /* 显示状态 */
  opacity: 1;
  visibility: visible;
}
.reveal-box.leave {
  /* 隐藏状态 */
  opacity: 0;
  visibility: hidden;
}

• 如果你的需求是第一次点击显示后不再隐藏，可以简化函数：

function animate() {
  // 直接设置为显示状态，无需切换
  revealBox.classList.add('enter');
  revealBox.classList.remove('leave');
}

这样调整后，只有点击你指定的那段文本时，才会触发图片的动画效果啦～

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