动画的目标对象(targets)
优质
小牛编辑
130浏览
2023-12-01
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
});