CSS Transitions without jQuery

Question

I'm making a web app and I want to switch between different tabs, which I have set up in section with the data-role set to page. I am able to switch through the tabs fine, but when I try to add a CSS transition it doesn't do anything. The app responds the same way whether I have a transition set or not, it doesn't even give me an error message of why no transition is taking place.

Here is my CSS:

 [data-role=page]{
  postion: absolute;
  top: 0; 
  left: 0;
  display:none;
  transition: left 0.8s ease;  /* faulty transition */
  }

 .active{
    display:block; 
  }

 .hide{
   display: none;
  }

The hide and active classes showed above in the CSS is what I use to toggle between tabs.

I'm seeing couple things here. `position` property has a typo that prevents the animation from doing anything ( ...in this specific case ). Also, In this code here, I don't see the `left` value changing at any point, which would mean that the `transition` does nothing. I made this example: http://jsfiddle.net/eWVAc/1/ to demonstrate that you need to apply a change to the property you wish to animate. — Joonas, Feb 08 '14 at 01:07
Thank you for making that example for me. I tried it my code, and even with the fixed typo, nothing is transitioning. — MissElizabeth, Feb 08 '14 at 01:18
Changing display properties ( in your case: from ```display:none``` to ```display:block``` ) could cause problems with transitions. comment them out and see if the transition works fine ( http://stackoverflow.com/questions/3331353/transitions-on-the-display-property ) — Varinder, Feb 08 '14 at 01:23

score 0 · Accepted Answer · answered Feb 08 '14 at 02:04

The transition property for css3 works only when the transition value changed. In your case, if you want your transition to work, you would have to change the left property of your element. Maybe you could use opacity 0 and 1 instead of hiding/showing your element and put your transition on this property.

[data-role=page] {
  position: absolute;
  top: 0; 
  left:0;
  display:none;
  transition:opacity 0.8s ease
  }

 .active{
    opacity:1; 
  }

 .hide{
   opacity:0;
  }

If you want your transition on the left property. You should have values for this that change.

.active{
    left:0; 
  }

 .hide{
   left:-100%;
  }

CSS Transitions without jQuery

1 Answers1