Velocity.js 动画延迟

Question

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

如果我没有指定任何延迟时间，这些动画如何顺序播放？阅读 Velocity 文档后，我认为这应该是模拟动画……但这被触发为：body 动画、菜单动画。它甚至不是代码中的序列。谁能指出原因？

$('#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'
    });
});

这是我对这些元素的 sass，如果可能是原因：

#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

'body' 和 'hamburger-menu-drop' 的动画持续时间为“300”，您会注意到，如果将正文的持续时间设置为 5 秒，'hamburger-menu-drop' 到 0.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>

Answer 2

我想出了问题所在，这确实是我的一个愚蠢错误。当然，正如 Thomas 指出的那样，velocity.js 工作正常。问题是我试图为正文中的菜单和正文本身制作动画，所以动画结束了。

Velocity.js 动画延迟

Velocity.js animation delay

javascript

jquery

css

animation

velocity.js