Only one CSS transition works in PhoneGap

Question

I'm trying to make change image size onclick in PhoneGap. I have code like this:

HTML

<div id="saber"><div id="handle"><img src="imgs/handle.png"></div>
<div id="blade" class="blade-opened"><img src="imgs/blade-blue.png"></div></div>

JavaScript

 $("#saber").bind( "click",
  function () 
   {
      if ($("#blade").height() > 0)
       {
      $("#blade").addClass("blade-closed"); 
     }
      else
       {
        $("#blade").removeClass("blade-closed");         
       }    
   }
   );

CSS

#blade
 {
  text-align: center;
  left: 0;
  right: 0;
  display: inline-block;
  position: fixed;
  z-index: 1;
 } 

.blade-opened
 {
  bottom: 5%;
  height: 81.25%;
  -webkit-transition: all 1s;
 }

.blade-closed
 {
  bottom: 29%;
  height: 0;
 }  

#blade img
 {
  height: 100%;
 } 

But when I open this on my phone, the image scales down with transition, but when I click once again, it just instantly appears after 1s.

Can anyone help me please?
Thank you very much.
Edit
I dont know what happened, but it is working now. I haven't change a thing. Strange...
But now when I click something it gets highlited blue, which isn't very nice on images. Can someone help me?

Answer 1

@Kuxa,

change:

    -webkit-transition: all 1s;

to:

    -webkit-transition: height 1s;

FWIW: this will work too:

    transition: height 1s;

You also need to set position, like this:

    position:relative; 

I have not been able to find good documentation to explain this.

UPDATE I should have added, when using position any value can be used, except the "initial" state - which is static