文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
动画的目标对象(targets)
CSS选择器
可使用任意CSS选择器作为动画目标
不可使用伪元素
Type | Default | Example |
String | null | targets: '.item' |
anime({
targets: '.css-selector-demo .el',
translateX: 250
});
DOM元素 /元素序列
使用DOM节点或节点的集合作为动画目标
Type | Default | Example |
DOM Node | null | targets: el.querySelector('.item') |
NodeList | null | targets: el.querySelectorAll('.item') |
var elements = document.querySelectorAll('.dom-node-demo .el');
anime({
targets: elements,
translateX: 270
});
Javascript对象
以JavaScript对象作为动画目标,这个对象必须含有至少一个数字属性。
Type | Default | Example |
Object | null | targets: myObjectProp |
var logEl = document.querySelector('.battery-log');
var battery = {
charged: '0%',
cycles: 120
}
anime({
targets: battery,
charged: '100%',
cycles: 130,
round: 1,
easing: 'linear',
update: function() {
logEl.innerHTML = JSON.stringify(battery);
}
});
var el = document.querySelector('.mixed-array-demo .el-01');
anime({
targets: [el, '.mixed-array-demo .el-02', '.mixed-array-demo .el-03'],
translateX: 250
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论