Блог

Главная - Вопросы по программированию - Javascript удаляет использование пространства div

Javascript удаляет использование пространства div

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня проблема. У меня есть эта страница с вкладками, но содержимое, которое не отображается, по-прежнему использует пробел, поэтому все разделы находятся друг под другом. Я хочу, чтобы использование пространства исчезло, но все равно хочу анимацию, которую я создал. Вот фрагмент:

 let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];

let tabsPane = tabHeader.getElementsByTagName("div");

for(let i=0;i<tabsPane.length;i  ){
    tabsPane[i].addEventListener("click",function(){
    tabHeader.getElementsByClassName("active")[0].classList.remove("active");
    tabsPane[i].classList.add("active");
    tabContent.getElementsByClassName("active")[0].classList.remove("active");
    tabContent.getElementsByTagName("div")[i].classList.add("active");
    
    tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
  });
}  
 .tabbedpage {
    padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
  height:60px;
  display:flex;
  align-items:center;
}
.tabbedpage .tabbedpage-header > div {
  width:calc(100% / 2);
  text-align:center;
  color:#888;
  font-weight:600;
  cursor:pointer;
  font-size:20px;
  text-transform:uppercase;
  outline:none;
}
.tabbedpage .tabbedpage-header > div > i {
  display:block;
  margin-bottom:5px;
}
.tabbedpage .tabbedpage-header > div.active {
  color:#d81e05;
  display: block;
}
.tabbedpage .tabbedpage-indicator {
  position:relative;
  width:calc(100% / 2);
  height:5px;
  background:#d81e05;
  left:0px;
  border-radius:5px;
  transition:all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
  position:relative;
  height:calc(100% - 60px);
  padding:10px 5px;
}
.tabbedpage .tabbedpage-content > div {
  top:-200%;
  opacity:0;
  transform:scale(0.9);
  transition:opacity 500ms ease-in-out 0ms,
    transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content > div.active {
  top:0px;
  opacity:1;
  transform:scale(1);
}  
 <div class="tabbedpage">
  <div class="tabbedpage-header">
    <div class="active">
      Statistics
    </div>
    <div>
      User management
    </div>
  </div>
  <div class="tabbedpage-indicator"></div>
  <div class="tabbedpage-content">
    <div class="active">
      <h2>This is statistics section</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
    </div>
    <div>
      <h2>This is sser management section</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
  </div>
  </div>
</div>

Как я могу удалить пространство, которое использует скрытый div, но при этом анимация по-прежнему исчезает?

Ответ №1:

Вы используете opacity , чтобы скрыть div , что означает div , что не будет скрыто, но это будет invisible . Таким образом, пространство div будет там.

Использование display приведет к удалению анимации.

Давайте поиграем с позицией, перекрываем оба div использования position: absolute и контролируем видимость с помощью opacity .

Смотрите код ниже.

 let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];

let tabsPane = tabHeader.getElementsByTagName("div");

for(let i=0;i<tabsPane.length;i  ){
    tabsPane[i].addEventListener("click",function(){
    tabHeader.getElementsByClassName("active")[0].classList.remove("active");
    tabsPane[i].classList.add("active");
    tabContent.getElementsByClassName("active")[0].classList.remove("active");
    tabContent.getElementsByTagName("div")[i].classList.add("active");
    
    tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
  });
}  
 .tabbedpage {
    padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
  height:60px;
  display:flex;
  align-items:center;
}
.tabbedpage .tabbedpage-header > div {
  width:calc(100% / 2);
  text-align:center;
  color:#888;
  font-weight:600;
  cursor:pointer;
  font-size:20px;
  text-transform:uppercase;
  outline:none;
}
.tabbedpage .tabbedpage-header > div > i {
  display:block;
  margin-bottom:5px;
}
.tabbedpage .tabbedpage-header > div.active {
  color:#d81e05;
  display: block;
}
.tabbedpage .tabbedpage-indicator {
  position:relative;
  width:calc(100% / 2);
  height:5px;
  background:#d81e05;
  left:0px;
  border-radius:5px;
  transition:all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
  position:relative;
  height:calc(100% - 60px);
  padding:10px 5px;
}
.tabbedpage .tabbedpage-content > div {
  position: absolute;
  width: 100%;
  top:0;
  left: 0;
  opacity:0;
  transform:scale(0.9);
  transition:opacity 500ms ease-in-out 0ms,
    transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content > div.active {
  opacity:1;
  transform:scale(1);
}  
 <div class="tabbedpage">
  <div class="tabbedpage-header">
    <div class="active">
      Statistics
    </div>
    <div>
      User management
    </div>
  </div>
  <div class="tabbedpage-indicator"></div>
  <div class="tabbedpage-content">
    <div class="active">
      <h2>This is statistics section</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
    </div>
    <div>
      <h2>This is sser management section</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
  </div>
  </div>
</div>

Комментарии:

1. Да, но теперь анимация исчезла. Я все еще хочу использовать анимацию

2. @A.Vreeswijk Я обновил свой ответ. Пожалуйста, проверьте.

3. Теперь у меня другая проблема xD, потому что это абсолютный макет, содержимое страницы с вкладками проходит через нижний колонтитул моей страницы?

4. Я не могу справиться с макетом без вашего полного кода. Тем не менее, вы можете контролировать переполнение.