Properties Map 动画属性

优质

小牛编辑

122浏览

2023-12-01

如果不写属性值的单位, Velocity 会将像素(px)作为默认单位

// 等同 padding: 1px
$element.velocity({ padding: 1 });

// 等同 padding-left: 1px, padding-right: 1px
$element.velocity({
    paddingLeft: 1,
    paddingRight: 1
});

// 但你不能这样写！因为这样相当于为 padding 赋了多个值
$element.velocity({ padding: "1 1 1 1" }); // error

Velocity 在 1.2.0+ 版本里增加了对 "px, em, rem, %, deg, vw/vh" 这些单位的支持，如果不填写属性单位默认单位还是 "px"，但 "deg" 用于 rotateZ 属性时可以省略不写。 Velocity 还支持动态计算属性值，包括 "+, -, *, /"，还可以设置元素在动画执行前的初始值，看下面示例：
( 注意："rem" 只支持 IE9+，"vh/vw" 只支持 IE9+ 和 Android 4.4+ )

$element.velocity({
    top: 50,                // 等同于 "50px"
    left: "50%",
    width: "+=5rem",        // 每次在当前值上叠加 5rem
    height: "*=2"           // 每次在当前值上叠乘 2
    color: ["#888", "#000"] // 每次动画执行前，color 的初始值都为"#000"（从"#000"过渡成"#888"）
});