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 class，然后使用 jQuery addClass 相反，特别是因为那些 CSS 值在整个代码中重复了多次。

尽管如此，您还想为 transform 属性添加供应商前缀，特别是 -webkit。这可能就是动画无法在 Android.

上运行的原因

CSS3 过渡不适用于移动设备

CSS3 transition not working on mobile

html

javascript

css

mobile

jquery