PhoneGap中只有一个CSS过渡

Question

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

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

您无需检查高度以添加或删除类。 只需切换课程

$("#saber").bind( "click", function () {
    $("#blade").toggleClass("blade-closed"); 
 });

您需要添加打开的类以增加高度。

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

Answer 2

@Kuxa，

更改：

    -webkit-transition: all 1s;

至：

    -webkit-transition: height 1s;

FWIW：这也会有效：

    transition: height 1s;

你还需要设置position ，如下所示：

    position:relative; 

我无法找到好的文档来解释这一点。

更新我应该添加，当使用位置时，可以使用任何值，除了“初始”状态 - 这是static