anime.js - にほんご。

Targets

更新日: 2018-06-25

targetsプロパティは、 アニメーションする要素、またはJavaScriptオブジェクトを定義します。

Type
CSSセレクタ'div''.item''path''#el path' ...
DOM要素document.querySelector('.item')
ノードリストdocument.querySelectorAll('.item')
オブジェクト{prop1: 100, prop2: 200}
要素配列['div', '.item', domNode]

CSSセレクタ

デモ

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

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要素

デモ

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

JavaScript

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

HTML

<div id="domNode">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>

CSS

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}
 
.shadow {
  position: absolute;
  opacity: .2;
}

ノードリスト

デモ

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

JavaScript

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

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

オブジェクト

デモ

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

{"charged":"0%"}

JavaScript

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

HTML

<div id="JSobject">
  <pre>{"charged":"0%"}</pre>
</div>

CSS

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

要素配列

デモ

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

JavaScript

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

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

MIT license. © 2017 Julian Garnier.

このコンテンツはJulian Garnier(juliangarnier)によるanime.jsドキュメントを翻訳/改変したものです。