javascript - CSS3 过渡不适用于移动设备

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

将所有这些 Javascript CSS 更改放入一个 CSS 类中，然后改用 jQuery addClass 可能是一个更好的主意，特别是因为这些 CSS 值在您的代码中重复了多次。

尽管如此，您还想为 transform 属性添加 vendor 前缀，特别是 -webkit。这可能就是动画无法在 Android 上运行的原因。