CODEWITHSUNDEEP
htmlcss
Brandon Turpy
Brandon Turpy

Reputation: 921

Adding transition effect to my css

I currently have the following

HTML

<div id="left_nav_wrapper">

   <div class="sidebar_wrapper">
      <div class="sidebar_header">Header</div>
      <div class="sidebar_content">Content</div>
   </div>
   <div class="sidebar_wrapper">
       <div class="sidebar_header">Header</div>
       <div class="sidebar_content">Content</div>
   </div>

</div>

CSS 

.sidebar_wrapper { width: 150px;  }
.sidebar_header { width: 150px; background-color: #F18986;  }
.sidebar_content { display: none; width: 150px; margin-left: -150px; background-color: #444; }
.sidebar_header:hover + .sidebar_content { display: inherit; margin-left: 0px; }

I want when they hover over the header, the content shows (which I have done) now I want to add a transition so it slides in, when I 

add transition: all 1s;
-webkit-transition: all 1s;

to the css it does not do anything, I have added it to the .sidebar_header and .sidebar_content and can not figure out why it will not use the transition when appearing.

Any help would be appreciated THANKS!

Upvotes: 0

Views: 150

Answers (4)

Mohsen Safari
Mohsen Safari

Reputation: 6805

transition do not work for display, you must do like this:

jsFiddle is here

HTML:

<div id="left_nav_wrapper">
  <div class="sidebar_wrapper">
    <div class="sidebar_header">Header</div>
    <div class="sidebar_content">Content</div>
  </div>
  <div class="sidebar_wrapper">
    <div class="sidebar_header">Header</div>
    <div class="sidebar_content">Content</div>
  </div>
</div>

CSS:

.sidebar_wrapper {
    width: 150px;
    overflow: hidden;
}
.sidebar_header {
    width: 150px;
    background-color: #F18986;
    position: relative;
    z-index: 3
}
.sidebar_content {
    width: 150px;
    display: block;
    margin-top: -20px;
    -webkit-transition: all 1s;
    position: relative;
    z-index: 1;
    background-color: #444;
}
.sidebar_header:hover + .sidebar_content {
    display: inherit;
    margin-top: 0px;
}

Upvotes: 0

nkmol
nkmol

Reputation: 8091

You can't use transition with this. However you can use animation of CSS3 with this :

sidebar_header:hover + .sidebar_content 
{
    display: block;
    animation: fadein 2s;  
    -webkit-animation: fadein 2s;   
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
}

@-webkit-keyframes fadein
{  
   from   {opacity:0;}
   to {opacity:1;margin-left:0;}
}

@keyframes fadein
{  
   from   {opacity:0;}
   to {opacity:1;margin-left:0;}
}

the animation-fill-mode = the target will retain the computed values set by the last keyframe encountered during execution

This way you can still use display: none; to completely get rid of the element.

Here a demo.

Upvotes: 0

Axel
Axel

Reputation: 10772

  1. Remove display: none; from .sidebar_content as your transition will not have an effect on it.

  2. Use height: 0 to hide the element, as setting it to display: none will disable the transition.

  3. Set .sidebar_wrapper to overflow: hidden to hide the portion of the .sidebar_content that hasn't reached the final position.

CSS

.sidebar_wrapper { width: 150px;  }
.sidebar_header { width: 150px; background-color: #F18986; overflow: hidden; }
.sidebar_content { height: 0; width: 150px; background-color: #444; margin-left: -150px;
transition: all 1s linear; -webkit-transition: all 1s linear; }
.sidebar_header:hover + .sidebar_content { height: auto; margin-left: 0px; }

DEMO: http://jsfiddle.net/MLPLs/

Upvotes: 0

Arun Aravind
Arun Aravind

Reputation: 1318

Transitions do not work on display property. You have to set properties like height: 0 to 100px like i have done here. 

.sidebar_content {
    height: 0;
    width: 150px;
    margin-left: -150px;
    background-color: #444;
    -moz-transition: height 0.5s ease-in;
    -o-transition: height 0.5s ease-in;
    -webkit-transition: height 0.5s ease-in;
    transition: height 0.5s ease-in;
}

.sidebar_header:hover + .sidebar_content {
    height: 100px;
    margin-left: 0px;
}

You cannot transition to height auto. In the case you don't want to fix the height of sidebar_content

You have to do transition on max-height property by setting it to a very high value that it never reaches. But it do have its consequences. You will have to adjust the transition duration to remove the delay when the max-height transitions from 0 to that high value.

As the maximum value of the max-height increases your reverse transition will be delayed

Upvotes: 1

Related Questions