Javascript CSS3转换在移动设备上不起作用

我有一个简单的div设置，当你滑动屏幕时，它会向上转换，在我的桌面上运行良好，但我无法在我的手机上进行转换（也在Android模拟器上进行了尝试）

起初我以为刷卡有问题（使用TouchSwipe），但后来我用一个按钮测试了一下，转换仍然不起作用。为了提供一些背景，这是一个Angular应用程序，这是Angular模板的一部分。我不认为这两者之间有任何冲突

有什么想法吗

HTML:

JS:

---

不要在

onclick

事件上设置

transition

属性！在css中设置它们。然后单击，只进行变换。不过我还没有对它进行测试。

最好将所有这些Javascript CSS更改放在一个CSS类中，然后使用jQuery

addClass

，尤其是因为这些CSS值在整个代码中重复了好几次

---

尽管如此，您还希望为

transform

属性添加供应商前缀，特别是-webkit。这可能就是为什么该动画无法在Android上运行。

您可以发布一个运行的JSFIDLE吗？我把你的代码放进了，但没有看到任何东西。我认为

“-webkit transition”、“-webkit transform 0.3s ease”

应该是

“-webkit transition”、“所有0.3s ease”

，同样的。但我只记得jQuery的

.css（）

方法会根据需要自动添加前缀。这不起作用，但是我会尝试下面的

类列表
答案。将它们移动到一个单独的类似乎可以让它在移动设备上工作，不知道这是如何工作的，但它似乎可以完成这项工作。我已经将所有的转换都改成这样：
-webkit转换：所有0.3s易用性和
-webkit转换：translateY（-40vh），我认为我做得很正确，因为从那以后我就没有看到任何问题。但是，我还是不知道为什么它会起作用！
<div id="fullpage" class="swipe-container">
    <div class="section">

        <button id="btnOpen" class="btn btn-primary">Open</button>

        <div class="swipeMenu">
            Text
        </div>

    </div>
</div>

.swipeMenu {
    height: 45vh;
    width: 90vw;
    background-color: #fff;
    position: absolute;
    bottom: -45vh;
    left: 0;
    right: 0;
    margin: 0 auto;
}

    $(function() {

        $("#btnOpen").click(function() {
        $('.swipeMenu').css("-webkit-transition", "-webkit-transform 0.3s ease");
      $('.swipeMenu').css("-moz-transition", "-moz-transform 0.3s ease");
      $('.swipeMenu').css("-o-transition", "-o-transform 0.3s ease");
      $('.swipeMenu').css("transition", "transform 0.3s ease");
      $('.swipeMenu').css("transform", "translateY(-40vh)");
        });

    //Enable swiping...
    $(".swipe-container").swipe( {
      //Generic swipe handler for all directions
      swipeUp:function(event, direction, distance, duration, fingerCount) {
        $('.swipeMenu').css("-webkit-transition", "-webkit-transform 0.3s ease");
        $('.swipeMenu').css("-moz-transition", "-moz-transform 0.3s ease");
        $('.swipeMenu').css("-o-transition", "-o-transform 0.3s ease");
        $('.swipeMenu').css("transition", "transform 0.3s ease");
        $('.swipeMenu').css("transform", "translateY(-40vh)");
      },
      swipeDown:function(event, direction, distance, duration, fingerCount) {
        $('.swipeMenu').css("-webkit-transition", "-webkit-transform 0.3s ease-in");
        $('.swipeMenu').css("-moz-transition", "-moz-transform 0.3s ease-in");
        $('.swipeMenu').css("-o-transition", "-o-transform 0.3s ease-in");
        $('.swipeMenu').css("transition", "transform 0.3s ease-in");
        $('.swipeMenu').css("transform", "translateY(40vh)");
      },
      //Default is 75px, set to 0 for demo so any distance triggers swipe
      threshold: 80
    });
  });