【ANIME.JS】複数の要素にアニメーションを指定する方法

2018年3月10日2019年6月12日ANIME.JS,JavaScriptライブラリ,JavaScript

「ANIME.JS」で複数の要素をターゲットにしてアニメーションを指定する方法です

カンマ区切りやスペース区切りでそれぞれ違った複数指定が可能です

カンマ区切りでor指定

targets: '#aaa , #bbb'

繋げて記述してand指定

targets: '#aaa#bbb'

スペースを挟んで親子指定

targets: '#aaa #bbb'

複数の要素にアニメーションを指定した動作サンプル

動作サンプルでは3つの要素にそれぞれアニメーションさせる対象が違うクリックイベントを付けています

See the Pen ANIME.JS CSS Multiple Elements by yochans (@yochans) on CodePen.

複数の要素にアニメーションを指定したサンプルコード

HTML

aa

CSS

#container{
  display: flex;
}

.target{
  width:100px;
  height:100px;
  margin:10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #01579B;
  color:#FFF;
}

JavaScript

document.getElementById('target0').addEventListener('click',function() {

  //idがtarget0とtarget2にアニメーション
  anime({
    targets: '#target0, #target2',
    direction:'reverse',
    rotate: 1800
  });
  
});

document.getElementById('target1').addEventListener('click',function() {

  //idがtaeget1でclassがtargetの要素にアニメーション
  anime({
    targets: '#target1.target',
    direction:'reverse',
    rotate: 1800
  });
  
});

document.getElementById('target2').addEventListener('click',function() {

  //idがcontainerの子要素でclassがtargetの要素にアニメーション
  anime({
    targets: '#container .target',
    direction:'reverse',
    rotate: 1800
  });
  
});