Javascript 单击某些文本后如何显示此图像？

我试图使用这个动画，但我需要的是，如果一些文本被点击，然后图像应该显示。 我是初学者，你能帮帮我吗。 谢谢

---

您可以将任何文本包装在

标记中。并给它一个id或类

<span id="click-to-reveal">Some text</span>

并将eventlistener添加到其中：

text.addEventListener('click', animate);

---

他可能是代码中的一员，代码的工作方式与您预期的一样：

其想法是首先切换用于隐藏/显示img的初始类名：

class=“显示框输入动画”

变为

class=“显示框离开动画”

为了避免等待隐藏img所需的0.9秒持续时间，可以添加等于或优于持续时间值的négative延迟。此负延迟应仅在负载时触发，然后重置为0

可以通过类通过自定义的

delay

添加它，在第一次单击时通过

revealBox.classList.remove（'delay'）删除

一旦类
enter
和
leave
在HTML中切换，并且
delay
类添加到HTML并在CSS中创建，在第一次单击之前不应看到
img

例如：


let-revealBox=document.querySelector（'.reveal-box'）；
让动画=函数（）{
if（revealBox.classList.contains（'enter'））{
revealBox.classList.remove（'enter'）；
revealBox.classList.add（'leave'）；
}否则{
revealBox.classList.remove（'leave'）；
revealBox.classList.remove（'delay'）；
revealBox.classList.add（'enter'）；
}
}
document.querySelector（'.discover box p'）。addEventListener（'click'，animate）
html，
身体{
宽度：100%；
身高：100%；
}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
保证金：0；
背景色：#f7f7f7；
光标：指针；
框大小：边框框；
填充：24px；
}
.展示箱{
位置：相对位置；
高度：计算（100vh-48px）；
最大高度：480px；
宽度：计算值（（100vh-48px）*0.66）；
最大宽度：320px；
溢出：隐藏；
}
.展示盒内部{
宽度：100%；
身高：100%；
溢出：隐藏；
}
.REVEL-box__内部：：后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：#c1b294；
}
.REVIEW-box__图像{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.enter.REVEL-box\uuuu内部{
动画：0.9s三次贝塞尔（0.76,0,0.24,1）0s都在右侧暂停滑动；
}
.enter.REVEL-box\uuuuu inner:：after{
动画：0.9秒三次贝塞尔（0.76,0,0.24,1）0.6秒都暂停向右滑出；
}
.enter.REVEL-box\uuuu图像{
动画：1.5s三次贝塞尔（0.76,0,0.24,1）0.3s都在向下暂停缩放；
}
.离开。展示盒子内部{
动画：0.9s三次贝塞尔（0.76,0,0.24,1）0s都暂停向右滑出；
}
.离开.展示盒子内部：：之后{
动画：0.9秒三次贝塞尔（0.76,0,0.24,1）0秒都暂停在左侧滑动；
}
.离开。展示盒子图片{
动画：0.9秒三次贝塞尔（0.76,0,0.24,1）0秒都暂停向左滑出；
}
.离开.延迟.打开箱子内部{
动画：0.9秒立方贝塞尔（0.76,0,0.24,1）-1秒都暂停向右滑出；
}
.leave.delay.discover-box\uuuu-inner:：after{
动画：0.9秒立方贝塞尔（0.76,0,0.24,1）-1秒都暂停在左侧滑动；
}
.离开.延迟.展示盒子图片{
动画：0.9秒三次贝塞尔（0.76,0,0.24,1）0秒都暂停向左滑出；
}
.设置动画。显示盒子内部{
动画播放状态：运行；
}
.animate.discover-box\uuuu inner:：after{
动画播放状态：运行；
}
.设置动画.显示-box\u图像{
动画播放状态：运行；
}
@关键帧向右滑动{
0% {
转换：translate3D（-100%，0，0）；
}
100% {
变换：translate3D（0,0,0）；
}
}
@关键帧向右滑出{
0% {
变换：translate3D（0,0,0）；
}
100% {
转换：translate3D（100%，0，0）；
}
}
@关键帧向左滑动{
0% {
转换：translate3D（100%，0，0）；
}
100% {
变换：translate3D（0,0,0）；
}
}
@关键帧向左滑出{
0% {
变换：translate3D（0,0,0）；
}
100% {
转换：translate3D（-100%，0，0）；
}
}
@关键帧向下缩放{
0% {
转换：比例（1.3）；
}
100% {
变换：比例（1）；
}
}

单击一些文本

这就是要修改的内容：
document.body.addEventListener（'click'，animate'）
将onclick设置在body以外的其他位置。您可以使用document.querySelector（'myCssSelector'）；可能的例子让你看到这个想法：@G-Cyrillus非常感谢，但我希望它不应该在开始时显示，当单击它时应该显示。我试图删除类，但没有成功。请帮忙。！重新加载并查看HTML中的enter/leave类开关。@G-Cyrillus很棒。但是为什么它会第一次设置动画呢？因为它的持续时间为.9秒，所以可以设置一个负延迟来覆盖它：pen updated；）他还需要切换类enter/leave（在HTML中），如果要先隐藏它；）
const text = document.getElementById("click-to-reveal");

text.addEventListener('click', animate);