将光标移到/点击文章中的句子上,可以查看译文。      显示繁体中文内容    显示简体中文内容

Transitions on the display: property
无法执行任何种类的过渡 display: none to display: block?

I'm currently designing a kind of CSS 'mega dropdown 'menu - basically a normal CSS-only dropdown menu, but one that contains different types of content.

My question is more of a 'can you think of a way around this problem 'sort of thing.
At the moment, it appears that CSS3 Transitions don't apply to the 'display 'property, i.e. you can't do any sort of transition from display: none to display: block (or any combination).

Can anyone think of a way for the second-tier menu from the above example to 'fade in 'when someone hovers over one of the top level menu items?

I'm aware that you can use transitions on the visibility: property, but i can't think of a way to utilise that effectively.

I've also tried using height but that just failed miserably.

I'm also aware that it's trivial to achieve this using JavaScript, but i wanted to challenge myself to use just CSS and i think i'm coming up a little short.

All and any suggestions most welcome.

时间:

You can concatenate two transitions or more, and visibility is what comes handy this time.


div> ul {
. . . 
 visibility:hidden;
 opacity:0;
 transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
div:hover> ul {
 visibility:visible;
 opacity:1;
 transition-delay:0s;
}

(Don't forget the vendor prefixes to the transition property! )

More details are in this article

You need to hide the element by other means in order to get this to work.i had the same issue on this page.

I accomplished the effect by positioning both <div> s absolutely and setting the hidden one to opacity: 0.

if you even toggle the display property from none to block, your transition on other elements will not occur.

To work around this, always allow the element to be display: block, but hide the element by adjusting any of these means :

  1. Set the height to 0.
  2. Set the opacity to 0.
  3. Position the element outside of the frame of another element that has overflow: hidden.

There are likely more solutions, but you cannot perform a transition if you toggle the element to display: none.for example, you may attempt to try something like this :


div {
 display: none;
 transition: opacity 1s ease-out;
 opacity: 0; 
}

div.active {
 opacity: 1;
 display: block;
}

But that will not work.from my experience, i have found this to do nothing :- (

Because of this, you will always need to keep the element display: block - but you could get around it by doing something like this :


div {
 transition: opacity 1s ease-out;
 opacity: 0; 
 height: 0;
 overflow: hidden;
}

div.active {
 opacity: 1;
 height: auto;
}

Currently all major browsers disable CSS transitions if you try to change the display property, but CSS animations still work fine so we can use them as a work-around.

example Code:- (You can apply it to your menu accordingly) [ Demo ]

Add the following CSS to your stylesheet: -


@-webkit-keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}

@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}

Then apply the fadeIn animation to the child on parent hover:- (and of course set display: block )


.parent:hover. child {
 display: block;

 -webkit-animation: fadeIn 1s;
 animation: fadeIn 1s;
}

display is not one of the properties that transition works upon.

See http://www.w3.org/TR/css3-transitions/#animatable-properties- for the list of properties that can have transitions applied to them.

My neat JavaScript trick is to separate the entire scenario into two different functions!

To prepare things, one global variable is declared and one event handler is defined :


 var tTimeout;
 element.addEventListener("transitionend", afterTransition, true);//firefox
 element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome

Then, when hiding element, i use something like this :


function hide(){
 element.style.opacity = 0;
}

function afterTransition(){
 element.style.display = 'none';
}

For reappearing the element, i am doing something like this :


function show(){
 element.style.display = 'block';
 tTimeout = setTimeout(timeoutShow, 100);
}

function timeoutShow(){
 element.style.opacity = 1;
}

It works, so far!

I ran into this today, with a position: fixed modal that i was reusing.i couldn't keep it display: none and then animate it, as it just jumped into appearance, and and z-index (negative values, etc) did weird things as well.

I was also using a height: 0 to height: 100%, but it only worked when the modal appeared.this is the same as if you used left: -100% or something.

Then it struck me that there was a simple answer.et voila :

First, your hidden modal.Notice the height is 0, and check out the height declaration in transitions...it has a 500ms, which is longer than my opacity transition.Remember, this affects the out-going fade-out transition :returning the modal to its default state.


#modal-overlay {
 background: #999;
 background: rgba(33,33,33,.2);
 display: block;
 overflow: hidden;
 height: 0;
 width: 100%;
 position: fixed;
 top: 0;
 left: 0;
 opacity: 0;
 z-index: 1;
 -webkit-transition: height 0s 500ms, opacity 300ms ease-in-out;
 -moz-transition: height 0s 500ms, opacity 300ms ease-in-out;
 -ms-transition: height 0s 500ms, opacity 300ms ease-in-out;
 -o-transition: height 0s 500ms, opacity 300ms ease-in-out;
 transition: height 0s 500ms, opacity 300ms ease-in-out;
}

Second, your visible modal.say you're setting a .modal-active to the body.now the height is 100%, and my transition has also changed.i want the height to be instantly changed, and the opacity to take 300ms.


.modal-active #modal-overlay {
 height: 100%;
 opacity: 1;
 z-index: 90000;
 -webkit-transition: height 0s, opacity 300ms ease-in-out;
 -moz-transition: height 0s, opacity 300ms ease-in-out;
 -ms-transition: height 0s, opacity 300ms ease-in-out;
 -o-transition: height 0s, opacity 300ms ease-in-out;
 transition: height 0s, opacity 300ms ease-in-out;
}

That's it, it works like a charm.

Change overflow:hidden to overflow:visible. it works better.i use like this :


#menu ul li ul {
 background-color:#fe1c1c;
 width:85px;
 height:0px;
 opacity:0;
 box-shadow:1px 3px 10px #000000;
 border-radius:3px;
 z-index:1;
 -webkit-transition:all 0.5s ease;
 -moz-transition:all 0.6s ease;
}

#menu ul li:hover ul {
 overflow:visible;
 opacity:1;
 height:140px;
}

visible is better because overflow:hidden act exactly like a display:none.

Taking from a few of these answers and some suggestions elsewhere, the following works great for hover menus (I'm using this with bootstrap 3, specifically) :


nav. dropdown-menu {
 display: block;
 overflow: hidden;
 max-height: 0;
 opacity: 0;
 transition: max-height 500ms, opacity 300ms;
 -webkit-transition: max-height 500ms, opacity 300ms;
}
nav. dropdown:hover. dropdown-menu {
 max-height: 500px;
 opacity: 1;
 transition: max-height 0, opacity 300ms;
 -webkit-transition: max-height 0, opacity 300ms;
}

You could also use height in place of max-height if you specify both values since height:auto is not allowed with transitions.the hover value of max-height needs to be greater than the height of the menu can possibly be.

...