Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
velocityjs
Advanced tools
Velocity.js is a fast, feature-rich animation engine for JavaScript. It allows you to animate HTML elements with a variety of effects, providing a more performant alternative to jQuery's $.animate() method. Velocity.js is designed to work seamlessly with jQuery but can also be used as a standalone library.
Basic Animations
This feature allows you to animate basic CSS properties like opacity and position. The code sample animates an element's opacity to 0.5 and moves it to 50% from the left over a duration of 1000 milliseconds.
document.getElementById('element').velocity({ opacity: 0.5, left: '50%' }, { duration: 1000 });
Color Animations
Velocity.js supports color animations, allowing you to animate CSS color properties. The code sample changes the background color of an element to red over a duration of 1000 milliseconds.
document.getElementById('element').velocity({ backgroundColor: '#ff0000' }, { duration: 1000 });
Scroll Animations
This feature allows you to animate scrolling to a specific element. The code sample scrolls the page to the element with an offset of -50 pixels over a duration of 1000 milliseconds.
document.getElementById('element').velocity('scroll', { duration: 1000, offset: -50 });
Easing
Velocity.js provides various easing functions to control the animation's acceleration and deceleration. The code sample animates an element's opacity to 1 using a 'spring' easing function over a duration of 1000 milliseconds.
document.getElementById('element').velocity({ opacity: 1 }, { duration: 1000, easing: 'spring' });
Chaining Animations
You can chain multiple animations together in sequence. The code sample first animates an element's opacity to 0.5 and then moves it to 50% from the left, each over a duration of 1000 milliseconds.
document.getElementById('element').velocity({ opacity: 0.5 }, { duration: 1000 }).velocity({ left: '50%' }, { duration: 1000 });
Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It supports a wide range of animations, including CSS properties, SVG, DOM attributes, and JavaScript objects. Compared to Velocity.js, Anime.js offers more advanced animation capabilities and a more modern API.
GSAP (GreenSock Animation Platform) is a robust JavaScript library for creating high-performance animations. It is widely used in the industry for its flexibility and power, supporting complex animations and timelines. GSAP is more feature-rich and versatile compared to Velocity.js, making it suitable for more complex animation needs.
Popmotion is a functional, flexible JavaScript animation library. It provides a range of tools for creating animations and interactions, including physics-based animations. Popmotion is more modular and functional compared to Velocity.js, offering a different approach to building animations.
velocity.js是velocity模板语法的javascript实现。
##Features
##Install
via npm:
$ npm install velocityjs
##Broswer
兼容支持es5的浏览器,可以通过测试来验证test case。
对于低端浏览器需要实现以下方法
##Examples
在tests目录下有大量的例子,node和浏览器下使用是一致的,另外,examples目录下有一个 最简单的例子。
##Public API
文件组织通过CommonJS方式,对于浏览器,通过spm可以打包为cmd模块。
var Velocity = require('velocityjs');
//1. 直接解析
Velocity.render('string of velocity', context, macros);
//2. 使用Parser和Compile
var Parser = Velocity.Parser;
var Compile = Velocity.Compile;
var asts = Parser.parse('string of velocity');
(new Compile(asts)).render(context, macros);
####context
context
是一个对象,可以为空,执行中$foo.bar
,访问路径是context.foo.bar
,
context
的属性可以是函数,和vm中定义保持一致。
context中得函数,有一个固定的eval
方法,可以用来运算vm语法字符串,比如webx对应的
$control.setTemplate
的实现。
##Syntax
具体语法请访问官网文档:velocity user guide。
###Directives
Directives支持set
, foreach
, if|else|elseif
, macro
, break
。不
支持有,stop
, evaluate
, define
, parse
。不过可以通过context来实现,比如
parse
实现。
###macro与parse
宏分为系统的宏,比如parse, include
,和用户自定义宏,通过#macro
在vm中定义,此
外可以使用自定义的js函数替代在vm中定义。对于系统宏和自定义宏,不做区分,对于
#parse
和#include
的调用,可以使用自定义函数来执行,可以参考测试用例中self defined macro部分。
##Questions
提问有几种方式
推荐一下沉鱼写的velocity。
##License
(The MIT License)
0.4.8 / 2014-12-20
FAQs
Velocity Template Language(VTL) for JavaScript
The npm package velocityjs receives a total of 547,685 weekly downloads. As such, velocityjs popularity was classified as popular.
We found that velocityjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.