Переход CSS3 не работает с свойством display

Ответ 1

display:none; удаляет блок со страницы, как будто он никогда не был там. Блок не может быть частично отображен; его либо там, либо нет. То же самое верно для visibility; вы не можете ожидать, что блок будет наполовину hidden который, по определению, был бы visible! К счастью, вы можете используйте opacity для эффектов затухания.
- ссылка

В качестве альтернативного решения CSS вы можете использовать свойства opacity, height и padding для достижения желаемого эффекта:

#header #button:hover > .content {
    opacity:1;
    height: 150px;
    padding: 8px;    
}

#header #button .content {
    opacity:0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
    transition: all .3s ease .15s;
}

(Префикс поставщика опущен из-за краткости.)

Ниже приведена рабочая демонстрация. Также здесь аналогичная тема на SO.

#header #button {
  width:200px;
  background:#ddd;
  transition: border-radius .3s ease .15s;
}

#header #button:hover, #header #button > .content {
    border-radius: 0px 0px 7px 7px;
}

#header #button:hover > .content {
  opacity: 1;
  height: 150px;
  padding: 8px;    
}

#header #button > .content {
  opacity:0;
  clear: both;
  height: 0;
  padding: 0 8px;
  overflow: hidden;

  -webkit-transition: all .3s ease .15s;
  -moz-transition: all .3s ease .15s;
  -o-transition: all .3s ease .15s;
  -ms-transition: all .3s ease .15s;
  transition: all .3s ease .15s;

  border: 1px solid #ddd;

  -webkit-box-shadow: 0px 2px 2px #ddd;
  -moz-box-shadow: 0px 2px 2px #ddd;
  box-shadow: 0px 2px 2px #ddd;
  background: #FFF;
}

#button > span { display: inline-block; padding: .5em 1em }

<div id="header">
  <div id="button"> <span>This is a Button</span>
    <div class="content">
      This is the Hidden Div
    </div>
  </div>
</div>

Ответ 2

Вы не можете использовать height: 0 и height: auto для перехода высоты. auto всегда относительна и не может быть перенесена. Однако вы могли бы использовать max-height: 0 и перейти к max-height: 9999px, например.

Извините, я не могу комментировать, мой представитель недостаточно высок...

Ответ 3

Сделал некоторые изменения, но я думаю, что получил эффект, который вы хотите использовать visibility. http://jsfiddle.net/9dsGP/49/

Я также произвел следующие изменения:

position: absolute; /* so it doesn't expand the button background */
top: calc(1em + 8px); /* so it under the "button" */
left:8px; /* so it shifted by padding-left */
width: 182px; /* so it fits nicely under the button, width - padding-left - padding-right - border-left-width - border-right-width, 200 - 8 - 8 - 1 - 1 = 182 */

В качестве альтернативы вы можете поместить .content как sibling из .button, но я не стал примером для этого.

Ответ 4

У меня возникла проблема с display:none

У меня есть несколько горизонтальных баров с эффектами перехода, но я хотел показать только часть этого контейнера и сложить остальные, сохранив эффекты. Я воспроизвел небольшое демо здесь

Очевидным было обернуть эти скрытые анимированные столбцы в div, а затем переключить эту высоту и непрозрачность элементов

.hide{
  opacity: 0;
  height: 0;
}
.bars-wrapper.expanded > .hide{
 opacity: 1;
 height: auto;
}

Анимация работает хорошо, но проблема в том, что эти скрытые полосы по-прежнему занимают пространство на моей странице и перекрывают другие элементы

поэтому добавление display:none в скрытую оболочку .hide решает проблему маржи, но не переход, ни применение display:none, либо height:0;opacity:0 не работает с дочерними элементами.

Итак, моим окончательным решением было дать этим скрытым полосам отрицательную и абсолютную позицию, и она хорошо работала с переходами CSS.

Jsfiddle

Ответ 5

макс высота

.PrimaryNav-container {
...
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
...
}

.PrimaryNav.PrimaryNav--isOpen .PrimaryNav-container {
max-height: 300px;
}

https://www.codehive.io/boards/bUoLvRg

Ответ 6

Недавно я нашел решение, в то время как возился с тем, что мне нравилось делиться.

Люди, которые непосредственно хотят увидеть результат:

С кликом: https://jsfiddle.net/dt52jazg/ С наведением: https://jsfiddle.net/7gkufLsh/1/

Ниже приведен код:

HTML

<ul class="list">
  <li>Hey</li>
  <li>This</li>
  <li>is</li>
  <li>just</li>
  <li>a</li>
  <li>test</li>
</ul>

<button class="click-me">
  Click me
</button>

CSS

.list li {
  min-height: 0;
  max-height: 0;
  opacity: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.active li {
  min-height: 20px;
  opacity: 1;
}

JS

(function() {
  $('.click-me').on('click', function() {
    $('.list').toggleClass('active');
  });
})();

Пожалуйста, дайте мне знать, есть ли какие-либо проблемы с этим решением. Я считаю, что с этим решением не будет ограничения максимальной высоты.

Ответ 7

Если вам нужно отключить элемент, и вам не нужно анимировать свойство margin. Вы можете попробовать margin-top: -999999em. Просто не переходите все.