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

不要在onclick事件上设置transition属性！ 将它们设置在CSS中。 然后单击，仅执行变换。 我还没有测试过。

Answer 2

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

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