Targets

CSSセレクタ

任意のCSSセレクタを指定することができます。

疑似要素を指定することは出来ません。

anime({
  targets: '.css-selector-demo .el',
  translateX: 250
});

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var cssSelector = anime({
  targets: '#cssSelector .el',
  translateX: 250
});

HTML

<div id="cssSelector">
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
</div>

CSS

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.shadow {
  position: absolute;
  opacity: .2;
}

DOM Node / NodeList

任意のDOM NodeまたはNodeListを指定することができます。

var elements = document.querySelectorAll('.dom-node-demo .el');

anime({
  targets: elements,
  translateX: 270
});

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var els = document.querySelectorAll('#nodeList .el');
var nodeList = anime({
  targets: els,
  translateX: 270
});

HTML

<div id="nodeList">
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
</div>

CSS

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.shadow {
  position: absolute;
  opacity: .2;
}

JavaScriptオブジェクト

1つ以上の数値プロパティが含まれるJavaScriptオブジェクトを指定することができます。

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);
  }
});

デモ

要素をクリックするとアニメーションを開始します。

{"charged":"0%","cycles":130}

JavaScript

var logEl = document.querySelector('#JSobject pre');
var battery = {
  charged: '0%',
  cycles: 120,
};
var JSobject = anime({
  targets: battery,
  charged: '100%',
  cycles: 130,
  round: 1,
  easing: 'linear',
  update: function() {
    logEl.innerHTML = JSON.stringify(battery);
  }
});

HTML

<div id="JSobject">
  <pre class="count">{"charged":"0%","cycles":130}</pre>
</div>

CSS

pre {
  font-family: 'Space Mono', monospace;
}

配列

複数のターゲットが含まれた配列。

複数種類の型を指定することができます。 例：['.el', domNode, jsObject]

var el = document.querySelector('.mixed-array-demo .el-01');

anime({
  targets: [el, '.mixed-array-demo .el-02', '.mixed-array-demo .el-03'],
  translateX: 250
});

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var el = document.querySelector('#JSarray .el-01');
var JSarray = anime({
  targets: [el, '#JSarray .el-02', '#JSarray .el-03'],
  translateX: 250
});

HTML

<div id="JSarray">
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el-01"></div>
  </div>
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el-02"></div>
  </div>
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el-03"></div>
  </div>
</div>

CSS

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.shadow {
  position: absolute;
  opacity: .2;
}