javascript - Velocity js 翻译问题

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 中转换转换时，最好使用 forcefeeding 并为属性值提供单位:

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