Velocity.js动画延迟

Question

我有点沮丧，因为velocity js在我的代码中表现得很奇怪。

如果我没有指定任何延迟时间，这些动画如何按顺序进行？在读完Velocity文档后，我认为这应该是模拟动画。但这是类似于:身体动画，菜单动画。它甚至不是代码中的序列。有人能告诉我原因吗？

$('#pr-nav-icon').click(function() {
    $('#hamburger-menu-drop').velocity({marginLeft: "0px"}, {
        duration: 300,
        delay: 0,
        easing: 'easeInOutQuart'
    });
    $('body').velocity({marginLeft: "440px"}, {
        duration: 300,
        delay: 0,
        easing: 'easeInOutQuart'
    });
});

以下是我对这些元素的看法，如果它可能是原因的话：

#hamburger-menu-drop {
  max-width: 420px;
  background: white;
  position: fixed;
  right: 0px;
  bottom: 0px;
  left: 0px;
  top: 0px;
  z-index: 9999;
  background-color: $darktext;
  overflow-y: auto;
  box-shadow: inset -10px 0 5px -5px hsla(0, 0%, 0%, 0.25);
  margin-left: -420px;
}

body {
  width: 100%;
  height: 100%;
  background: #fff;
  line-height: 1.55;
  font-family: $titlefont;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
  margin: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  color: $darktext;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  font-smooth: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow-x: hidden;
  font-size: 1.8rem;
  line-height: 1.25;
}

Answer 1

我发现问题出在哪里，这真的是我的一个愚蠢的错误。当然，正如托马斯所指出的那样，velocity.js工作正常。问题是，我试图使身体中的菜单和身体本身具有动画效果，所以动画效果消失了。

Answer 2

你的持续时间是"300“动画的‘身体’和‘汉堡包-菜单-下降’，你会注意到，如果你设置的持续时间为5秒和‘汉堡-菜单-下降’为.3秒，你会看到一个发生在另一个。我已经将主体的背景更改为黄色，这样您将能够直观地看到发生的更改。

​

$('#pr-nav-icon').click(function() {
  $('#hamburger-menu-drop').velocity({
    marginLeft: "0px"
  }, {
    duration: 300,
    delay: 0,
    easing: 'easeInOutQuart'
  });
  
    $('body').velocity({
    backgroundColor: "#ffcc3a"
  }, {
    duration: 5000,
    delay: 0,
    easing: 'easeInOutQuart'
  });
});

button {
  width: 15%;
}
#hamburger-menu-drop {
  max-width: 420px;
  background: white;
  position: fixed;
  right: 0px;
  bottom: 0px;
  left: 0px;
  top: 0px;
  z-index: 9999;
  background-color: $darktext;
  overflow-y: auto;
  box-shadow: inset -10px 0 5px -5px hsla(0, 0%, 0%, 0.25);
  margin-left: -420px;
}
body {
  width: 100%;
  height: 100%;
  background: #fff;
  line-height: 1.55;
  font-family: $titlefont;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
  margin: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  color: $darktext;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  font-smooth: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow-x: hidden;
  font-size: 1.8rem;
  line-height: 1.25;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.2/velocity.min.js"></script>

<button id="pr-nav-icon">CLICK ME</button>
<div id="hamburger-menu-drop">HAMBURGER</div>

​