javascript - 在 PhoneGap 中只有一种 CSS 转换有效

Question

我正在尝试在 PhoneGap 中更改图像大小 onclick。我有这样的代码:

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%;
 } 

但是当我在手机上打开这个时，图像会随着过渡缩小，但是当我再次点击时，它会在 1 秒后立即出现。

谁能帮帮我吗？
非常感谢。
编辑
我不知道发生了什么，但它现在正在工作。我没有改变任何事情。奇怪……
但是现在，当我单击某些内容时，它会变成蓝色高亮显示，这在图像上不是很好看。有人可以帮助我吗？

Answer 1

@库萨，

改变:

    -webkit-transition: all 1s;

到:

    -webkit-transition: height 1s;

FWIW:这也行:

    transition: height 1s;

你还需要设置position，像这样:

    position:relative; 

我没能找到很好的文档来解释这一点。

更新 我应该补充说，在使用position 时可以使用任何值，“初始”状态除外- which is static