Velocity.js 动画延迟答案

【问题标题】：Velocity.js animation delayVelocity.js 动画延迟
【发布时间】：2017-02-02 17:47:52
【问题描述】：

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

如果我没有指定任何延迟时间，这些动画如何按顺序播放？阅读 Velocity Docs 后，我认为这应该是模拟动画......但这就像：身体动画，菜单动画。它甚至不是代码中的序列。有人可以指出原因吗？

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

【问题讨论】：

标签： javascript jquery css animation velocity.js

【解决方案1】：

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

【讨论】：

嗨，托马斯。谢谢您的回答！诀窍是我不能同时为这两个 div 设置动画。我想如果我在两个 div 上放置相同的时间和缓动，那么它们应该以平滑的动作向右移动。但我得到一个翻译，然后另一个。

【解决方案2】：

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

【讨论】：