Вопрос:

Div исчезает при переходе CSS

css html5 css3 bootstrap-4

573 просмотра

1 ответ

75 Репутация автора

У меня есть два деления рядом друг с другом. Одним нажатием кнопки div слева падает, оставляя только div справа. Поскольку div справа - это width: 100%; он заполняет пространство, оставшееся после свернутого левого div. Единственная проблема заключается в том, что пока div разваливается / происходит переход CSS, правильный div на мгновение исчезает, и я не могу понять, почему.

HTML

<div>
  <div id="demo" class="collapse show width">
    <aside>
    </aside>
  </div><!--COLLAPSE-->

  <main>
    <button role="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
      simple horizontal collapsible
    </button>
    <div class="sample">
      Some TExt
    </div>
  </main>
</div>

CSS

html {
  height: 100%
}

body {
  height: 100%;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  background: gray;
}

a {
  color: #00B7FF;
}

.collapse {
  visibility: hidden;
}

.collapse.show {
  visibility: visible;
  display: block;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.45s;
  transition-duration: 0.45s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}

.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

aside {
  height: 100vh;
  width: 250px;
  background-color: white;
  /*border-right:1px solid black;*/
  display: block;
  float: left;
}

.sample {
  margin-top: 100px;
  text-align: center;
}

main {
  width: 100%;
  height: 100vh;
  background-color: pink;
  display: inline;
}

Живой пример

https://jsfiddle.net/djjvqtop/1/

Это происходит во всех браузерах. Есть ли способ предотвратить это?

Автор: kennsorr Источник Размещён: 08.11.2017 11:29

Ответы (1)


2 плюса

71 Репутация автора

Решение

Проблема вызвана тем, что при добавлении overflow: hiddenизменяется высота #demo. Первоначально это 0, потому что он не содержит ничего, кроме элемента float. Класс .collapsingдобавляет overflow: hidden, что делает его расширенным, чтобы содержать число с плавающей точкой. Так что #demo.collapsingимеет высоту <aside>и <main>элемент находится под ним и вне поля зрения.

Одно из решений состоит в том, чтобы сделать #demoтакже плавание влево.

Автор: Izabela Размещён: 30.12.2017 06:08
Вопросы из категории :
32x32