在2个div之间切换-可见性和CSS动画

问题描述

在我的网站上，一个容器中有两个div。一个div的文字为英语，另一个div的文字为普通话。我在侧面上有一个按钮，希望用户切换并控制自己喜欢的每个div /语言的可见性。我正在使用JS添加/删除类可见性（不透明度和显示）。默认情况下，我可以查看英文版本。我的素描进行到一半时，当用户单击按钮时，英语div消失，而普通话没有出现。下面的代码-

HTML-

 <div class="textSection">

            <div class="eng about" id="eng">
               <p>SHEK LEUNG
               </p>
            </div>
            <div class="mandarin about" id="man">
               <p>
                  「為Samson畢業後在倫敦創立的品牌
               </p>
            </div>
         </div>
         <button class="langChange">⥃</button>

css-

.textSection {

   width: 50vw;
   height: 80vh;
   position: relative;
   top: 10vh;
   left: 30vw;
   display: flex;
   justify-content: center;
   align-items: center;

}



.about {

   position: absolute;
   width: 100%;
   height: 100%;
   opacity: 1;
   Box-sizing: border-Box;
   transition: all 1s;

}

.eng {
   border-radius: 10px;
   background: url("72ppi/Asset\ 3.png");
   background-size: 100% 100%;
   font-family: Helvetica,sans-serif;
   font-weight: bold;
   font-size: 1.2rem;
   line-height: 1.7;
   text-align: justify;
   text-transform: uppercase;
   color: white;
   padding: 3rem;
   opacity: 1;
   display: block;

}

.mandarin {

   font-family: Hiragino Sans GB;
   font-size: 1.3rem;
   line-height: 2;
   text-align: justify;
   text-transform: uppercase;
   font-weight: bold;
   color: black;
   padding: 3rem;
   opacity: 1;
   border-radius: 10px;
   border: solid 2px black;
   opacity: 0;
   display: none;
}

.hidden {
   display: none;
}

.visuallyhidden {
   opacity: 0;
}

.seen {
   display: block;
}

.visual {
   opacity: 1;
}
.langChange {
   position: absolute;
   border: none;
   padding: 1rem 2rem;
   border-radius: 10px;
   margin: 0;
   text-decoration: none;
   font-size: 2rem;
   left: 20vw;
   cursor: pointer;
   background-color: transparent;
   color: black;
   
}

JS-

let engBox = document.getElementById('eng'),manBox = document.getElementById('man')
langbtn = document.querySelector('.langChange');

langbtn.addEventListener('click',function () {
   console.log(engBox.classList);
   if (engBox.classList.contains('hidden')) {
      engBox.classList.remove('hidden');
      setTimeout(function () {
         engBox.classList.remove('visuallyhidden');
      },20);
   } else {
      engBox.classList.add('visuallyhidden');
      engBox.addEventListener('transitionend',function (e) {
         engBox.classList.add('hidden');
      },{
         capture: false,once: true,passive: false
      });
   }

},false);

langbtn.addEventListener('click',function () {
   console.log(manBox.classList);
   if (manBox.classList.contains('seen')) {
      manBox.classList.remove('seen');
      setTimeout(function () {
         manBox.classList.remove('visual');
      },20);
   } else {
      manBox.classList.add('seen');
      manBox.addEventListener('transitionend',function (e) {
         manBox.classList.add('seen');
      },passive: false
      });
   }
},false);

解决方法

从简单开始并逐步建立。这是最小的工作可见性切换。位置变化，布局和大多数时间可以逐段添加到CSS中，直到您拥有所需的内容为止。

x

const engBox = document.getElementById('eng');
const manBox = document.getElementById('man');
const langbtn = document.querySelector('.langChange');

langbtn.addEventListener('click',function () {
   engBox.classList.toggle('transparent');
   manBox.classList.toggle('transparent');
});

.about {
overflow: hidden;
  transition: all 2s;
}

.transparent {
  opacity: 0;
}