在PhoneGap中只有一个CSS转换有效

Only one CSS transition works in PhoneGap

本文关键字：CSS 转换 有效 有一个 PhoneGap      更新时间：2023-09-26


我正在尝试在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秒后立即出现

有人能帮我吗？
非常感谢。
编辑
我不知道发生了什么事，但它现在起作用了。我什么都没改变。奇怪
但现在，当我点击某个东西时，它会变成高亮蓝色，这在图像上不是很好。有人能帮我吗？

@Kuxa，

更改：

    -webkit-transition: all 1s;

到：

    -webkit-transition: height 1s;

FWIW：这也会起作用：

    transition: height 1s;

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

    position:relative;

我一直找不到好的文件来解释这一点。

UPDATE我应该添加，当使用位置时，可以使用任何值，但"初始"状态除外，即static

添加或删除类不需要检查高度。只需切换类别

$("#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");        
   }    
 });
相关文章：