返回介绍

Properties Map 动画属性

发布于 2019-05-17 20:52:22 字数 880 浏览 1165 评论 0 收藏 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")
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文