Velocity js translateY问题

Question

我有以下代码来做transitionx

     var w = $(window).width()*0.02;

      $('#mChangePassword').velocity({translateX: w},
      {
        duration: 300,
        'complete': function(){
          $('.mSettingsMain').fadeOut(300);
        }
      });

附上 GIF 在移动应用中的工作原理 http://g.recordit.co/WDCGVFPXsE.gif

注意：点击上述链接无法正常工作，复制粘贴图片链接有效。

当我点击按钮时，这里的动画是从右到左的。

我想要从下到上的相同动画，我尝试使用 translateY 但它不起作用，

我尝试了以下代码

      var h = $(window).height()*0.02;

      $('#mChangePassword').velocity({translateY: h},
      {
        duration: 300,
        'complete': function(){
          $('.mSettingsMain').fadeOut(300);
        }
      });

但它不起作用，我想要该 gif 中的相同动画“从下到上”或“向上滑动”。

任何帮助表示赞赏。谢谢。

Answer 1

在 Velocity 中转换变换时，最好使用强制输入并为属性值提供单位：

$('#mChangePassword').velocity({translateY: [h + 'px', '100%']});