日別アーカイブ: 2021年9月1日

contact

コメントを残す

当ブログに関するお問い合わせは、以下のフォームよりお願いいたします。

なお、内容によってはお答えできない場合がございますこと、あらかじめご了承ください。

    JavaScript5.6(クラス継承)

    コメントを残す

    5から続きます

    3:thisを使いこなす

    mixinとSCSSは1と同じなので省略

    HTMLの記述

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap" rel="stylesheet">
</head>
<body>
  <div id="container">
  <div class="animate-title">
    PLAY ANIMATION
  </div>
  <div class="animate-title-2">
    ANIMATIONNNNNN
  </div>
    <button id="btn">Animation</button>
  </div>
  <script src="main.js"></script>
</body>
</html>

    main.jsの記述

    document.addEventListener("DOMContentLoaded", function () {
  const btn = document.querySelector("#btn");
  const ta = new TextAnimation(".animate-title");
  const ta2 = new TextAnimation(".animate-title-2");
  ta.animate();
  ta2.animate();
// btn.addEventListener('click', ta.animate.bind(ta));
// bindを使いたくないとき
  btn.addEventListener("click", function () {
    ta.animate();
  });
});

// フリーな位置にあるとグローバルオブジェクト(window)を参照する
console.log(this);

// new演算子を使うことによってオブジェクトを生成するためのもの
class TextAnimation {
  constructor(el) {
// 変数taとta2参照する
  console.log(this);
  this.el = document.querySelector(el);
  this.chars = this.el.innerHTML.trim().split("");
  this.el.innerHTML = this._splitText();
}
_splitText() {
  return this.chars.reduce((acc, curr) => {
  curr = curr.replace(/\s+/, " ");
  return `${acc}<span class="char">${curr}</span>`;
}, "");
}

// animate() {
// console.log(this);
// this.el.classList.toggle("inview");
// }

// タイムアウトを設定するとき
// animate() {
// // windowは省略できるよ
// window.setTimeout(function (){
// // ここのthisはwindowsオブジェクトを参照する
// console.log(this);
// this.el.classList.toggle('inview');
// // bindを用いたthisの束縛
// }.bind(this));
// }
// }

// こちらの書き方でもOK(bindを使わないときの記法)
animate() {
  const _that = this;
    setTimeout(function () {
    console.log(_that);
   _that.el.classList.toggle('inview');
  },1000
 )};
}

    続きを読む →