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

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

Пока все, что мне удалось сделать, это заставить скрытый div показать, но нет никаких ослабляющих переходов, что бы это ни было.

Вот мой код на JSfiddle http://jsfiddle.net/9dsGP/

Вот мой код:

HTML:

 

CSS:

 #header #button {width:200px; background:#eee} #header #button:hover > .content {display:block; opacity:1;} #header #button .content:hover { display:block;} #header #button .content { -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; opacity:0; clear: both; display: none; top: -1px; left:-160px; padding: 8px; min-height: 150px; border-top: 1px solid #EEEEEE; border-left: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; -webkit-border-radius: 0px 7px 7px 7px; -moz-border-radius: 0px 7px 7px 7px; -khtml-border-radius: 0px 7px 7px 7px; border-radius: 0px 7px 7px 7px; -webkit-box-shadow: 0px 2px 2px #DDDDDD; -moz-box-shadow: 0px 2px 2px #DDDDDD; box-shadow: 0px 2px 2px #DDDDDD; background: #FFF; } направо #header #button {width:200px; background:#eee} #header #button:hover > .content {display:block; opacity:1;} #header #button .content:hover { display:block;} #header #button .content { -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; opacity:0; clear: both; display: none; top: -1px; left:-160px; padding: 8px; min-height: 150px; border-top: 1px solid #EEEEEE; border-left: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; -webkit-border-radius: 0px 7px 7px 7px; -moz-border-radius: 0px 7px 7px 7px; -khtml-border-radius: 0px 7px 7px 7px; border-radius: 0px 7px 7px 7px; -webkit-box-shadow: 0px 2px 2px #DDDDDD; -moz-box-shadow: 0px 2px 2px #DDDDDD; box-shadow: 0px 2px 2px #DDDDDD; background: #FFF; } 

Любая подсказка о том, что я делаю неправильно? Просто пытаюсь получить гладкий эффект для скрытого контента, когда наводил курсор на кнопку. Заранее спасибо!

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 } 
  

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

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

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

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

С кликом: https://jsfiddle.net/dt52jazg/

С помощью Hover: https://jsfiddle.net/7gkufLsh/1/

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

HTML

 
  • Hey
  • This
  • is
  • just
  • a
  • test

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'); }); })(); 

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

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

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

 position: absolute; /* so it doesn't expand the button background */ top: calc(1em + 8px); /* so it's under the "button" */ left:8px; /* so it's 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 */ направо position: absolute; /* so it doesn't expand the button background */ top: calc(1em + 8px); /* so it's under the "button" */ left:8px; /* so it's 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 в качестве брата .button, но я не стал примером для этого.

Я столкнулся с проблемой с 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

максимальная высота

 .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

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