Question

我有一个简单的div设置，当您向上滑动屏幕时会向上移动，并且它在我的桌面上工作正常，但我无法通过移动设备进行转换（也尝试过）一个Android模拟器。）

我认为首先滑动是一个问题（使用TouchSwipe），然后我用一个按钮测试它，过渡仍然没有工作。为了给出一些背景知识，它是一个Angular应用程序，这是Angular模板的一部分。我不认为这有任何冲突......

有什么想法吗？

HTML：

<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>

CSS：

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

JS：

    $(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
    });
  });

Answer 1

不要在transition事件上设置onclick属性！将它们设置为css。然后单击，执行转换。我没有测试过它。

Answer 2

将所有这些Javascript CSS更改放入单个CSS类中可能更好一点，然后使用jQuery addClass，尤其是因为这些CSS值在整个代码中重复多次。

尽管如此，您还希望为该transform属性添加供应商前缀，特别是-webkit。这可能就是动画不能在Android上运行的原因。

CSS3过渡不适用于移动设备

2 个答案: