Properties Map 动画属性

发布于 2019-05-17 字数1060 浏览 896 评论 0

如果不写属性值的单位, 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")
});

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!