Javascript 门打开后如何隐藏背面？香草JS/CSS门动画

因此，我有一个门动画使用香草JS与CSS的样式。有没有办法在门开着的时候把后面藏起来？ 以及使门不可点击。（我没有将其作为切换，但您仍然可以使用该按钮进行交互。）

基本上，我只想要一个背景，而不是看到门打开时向后的“1”

关于如何实现这一点有什么想法吗？我想这是增加了另一个风格的div，但我真的不确定在闲逛了一段时间后

干杯

代码笔在这里：

HTML:

JS

---

你可以尝试这样做，只要在另一侧有一个按钮，就像门的背面一样

<div>
  <div class="door-back">
    <button class="door front">1</button>
    <button class="door back">2</button>
  </div>

1.
2.

您可以尝试这样做，只要在另一侧有一个按钮，就像门的背面一样

<div>
  <div class="door-back">
    <button class="door front">1</button>
    <button class="door back">2</button>
  </div>

1.
2.

您既可以禁用

单击门按钮，也可以在CSS中打开门后不显示“1”

。开门{
…其他css
//您只需添加此属性即可禁用单击
指针事件：无；
颜色：黑色；
}

将文本颜色设为黑色将使其完全变为黑色

如果您完全想删除文本“1”，则可以执行以下操作

const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)

function openTheDoor() {
    doorEl.classList.add("doorOpen");
    doorEl.textContent='';
}

这是我能想到的两种方法。
您可以实现禁用
单击门按钮和在CSS中打开门后不显示“1”两种功能

。开门{
…其他css
//您只需添加此属性即可禁用单击
指针事件：无；
颜色：黑色；
}

将文本颜色设为黑色将使其完全变为黑色

如果您完全想删除文本“1”，则可以执行以下操作

const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)

function openTheDoor() {
    doorEl.classList.add("doorOpen");
    doorEl.textContent='';
}

以下是我可以想到的两种方法。
可能的解决方案：在转换时更改文本颜色：


const doorEl=document.querySelector（“.door”）；
doorEl.addEventListener（'单击'，打开门）
函数openTheDoor（）{
doorEl.classList.toggle（“doorOpen”）；
}
。后门{
位置：相对位置；
高度：105px；
宽度：105px；
背景图像：url（“https://i.redd.it/e84gxikhoul21.jpg");
边界半径：50px；
背景尺寸：封面；
保证金：0自动；
边缘顶部：50px；
}
.门{
位置：绝对位置；
高度：105px；
宽度：105px；
字号：1.5em；
颜色：白色；
边框：2件实心黄花；
边界半径：50px；
背景：黑色；
光标：指针；
变换原点：左；
过渡：转变。5秒轻松进出，
颜色0s.3s线性
}
1.开门{
变换：透视（1200px）translateZ（0px）translateX（0px）translateY（0px）rotateY（-150度）；
颜色：黑色；
}
.d1{
顶部：100px；
左：60px；
}

1.
可能的解决方案：在转换时更改文本颜色：


const doorEl=document.querySelector（“.door”）；
doorEl.addEventListener（'单击'，打开门）
函数openTheDoor（）{
doorEl.classList.toggle（“doorOpen”）；
}
。后门{
位置：相对位置；
高度：105px；
宽度：105px；
背景图像：url（“https://i.redd.it/e84gxikhoul21.jpg");
边界半径：50px；
背景尺寸：封面；
保证金：0自动；
边缘顶部：50px；
}
.门{
位置：绝对位置；
高度：105px；
宽度：105px；
字号：1.5em；
颜色：白色；
边框：2件实心黄花；
边界半径：50px；
背景：黑色；
光标：指针；
变换原点：左；
过渡：转变。5秒轻松进出，
颜色0s.3s线性
}
1.开门{
变换：透视（1200px）translateZ（0px）translateX（0px）translateY（0px）rotateY（-150度）；
颜色：黑色；
}
.d1{
顶部：100px；
左：60px；
}

1.
噢，哇，我觉得自己像个白痴。。。我正在为我的项目中的另一个属性使用innerHTML=“”，以在模式关闭时清除它，而这甚至不是您的第二种方式。好极了非常感谢你的回答！哦，哇，我觉得自己像个白痴。。。我正在为我的项目中的另一个属性使用innerHTML=“”，以在模式关闭时清除它，而这甚至不是您的第二种方式。好极了非常感谢你的回答！谢谢你的回复！我以前做过一个扑克牌翻转动画，实际上我用过类似的东西，但我真的没想到。问题是我使用了25个门元素，所以如果我想这样做的话，我需要再制作25个元素。但我真的可以用这个！我感谢你的回应！谢谢你的回复！我以前做过一个扑克牌翻转动画，实际上我用过类似的东西，但我真的没想到。问题是我使用了25个门元素，所以如果我想这样做的话，我需要再制作25个元素。但我真的可以用这个！我感谢你的回应！
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)

function openTheDoor() {
    doorEl.classList.add("doorOpen");
    doorEl.textContent='';
}