速度：第一个参数不是属性映射答案

【问题标题】：Velocity: First Argument was not a property map速度：第一个参数不是属性映射
【发布时间】：2020-10-05 01:35:46
【问题描述】：

我正在使用 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

【问题讨论】：

标签： javascript typescript velocity.js

【解决方案1】：

我通过导入velocity 和velocity ui 让它工作：

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

【讨论】：

【解决方案2】：

如果您使用的是测试版 Velocity V2，那么这还行不通 - 我删除了诸如此类的快捷方式以支持可扩展的 API - 我现在正在处理序列，当他们返回这个答案时在那里（在接下来的几周内）。

【讨论】：

【解决方案3】：

我有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();

});

【讨论】：

【解决方案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>

【讨论】：