1

First of all I have to say that I'm working on website which I can only manipulate its CSS. So, please don't suggest me a javascript/html solution.

Here is my problem,

You can see in this jsFiddle demo, there is a basic toggle display method but it doesn't have a transitions effect on default CSS. The HTML is exactly like that, and I don't have a permission to change its HTML or javascript, I can only play with CSS.

I want to add CSS 3 Transitions effect to this toggle method.

As Jim Jeffers's answer on this question, transitions effect never works on

display: block < - > display: none

So I will always need to keep the element display block.

I tried this but it didn't work, 

.infocontent {
    -webkit-transition: opacity 1s ease-out;
}
div[style='display: block; '].infocontent { 
   opacity: 1; height: auto !important;
}
div[style='display: none; '].infocontent {
   display:block !important;  opacity: 0; height: 0px; 
}

Why isn't it working? How can I do that?

Community
  • 1
  • 1
Okan Kocyigit
  • 13,203
  • 18
  • 70
  • 129
  • I'm having the same issue where I can't use fx jquery .hide(100) or .show(100) functions cuz they make weird spacing on my site (which is unacceptable). If I use display:block; and display:none; however the spacing is gone, but im lacking the cool transition effect you get with jquery. – ObedMarsh Dec 05 '15 at 01:19

1 Answers1

0

Try to use transition on max-height instead of height.

Ana
  • 35,599
  • 6
  • 80
  • 131
  • 1
    I don't think he's trying to transition the height, just the opacity. I'm not sure how this is actually supposed to look, though; the height seems like the natural thing to transition in this case. – Dagg Nabbit May 20 '12 at 23:03
  • Yes,the height seems like the natural thing to transition in this case, but you cannot transition from height: auto; (that's why I suggested max-height). – Ana May 20 '12 at 23:06
  • @Ana, no it's not working, actually I can set a specific height, it's not important.http://jsfiddle.net/tRTgE/2/ – Okan Kocyigit May 20 '12 at 23:10
  • Man, sometimes I feel like I'm just speaking a made-up language or something. – Dagg Nabbit May 20 '12 at 23:12