Question

我正在使用Velocity做一些动画（没有jQuery），我遇到了一个问题，我收到以下错误：

Velocity：第一个参数（[object HTMLDivElement]）不是属性映射，已知操作或已注册的重定向。中止。

我看了其他的例子，他们似乎和我一样，并且他们的工作。为什么我的不工作？

当我转出rev.elem的值时，我得到HTMLDivElement

Velocity(rev.elem, 'slideUp', {
    duration: 225,
    queue: false,
    easing: 'easeInOutQuad'
});

这家伙似乎以同样的方式使用它并且对他有用：
http://jasonweaver.name/blog/velocity-js-vertical-slide-without-jquery

Answer 1

我通过导入速度和速度ui来实现它：

import Velocity from 'velocity-animate';
import 'velocity-animate/velocity.ui';

Answer 2

我有example of this up and running ...

该示例基于Jason Weaver的原始示例，但已更新为最新版本的Velocity并修复了PUG语法错误。

  var el = document.querySelector(element), // cache click target
    con = document.querySelector(container), // cache container target
    up = 'slideUp', // store up command
    down = 'slideDown'; // store down command

  el.addEventListener('click', function(event) {

    var active = el.classList.contains('active'); // store active state
    el.classList.toggle('active'); // toggle click target active

    Velocity(con, active ? up : down, { // test and init command
      duration: duration, // duration set in function call params
      easing: easing // easing set in function call params
    });

    event.preventDefault();

});

Answer 3

如果您正在使用beta Velocity V2，那么这将无法使用 - 我删除了这样的快捷方式，转而使用可扩展的API - 我现在正在处理序列，当它们返回时会返回到这个答案在那里（在接下来的几周内）。

Answer 4

您需要同时导入“ velocity”和“ velocity ui”：

<script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.js"></script>
<script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script>

Velocity：First Argument不是属性图

4 个答案: