下記の箇所がいまいち分からなくてみているのですが、コンストラクタ 内の実行順が上からではない気がします。Javascriptは非同期処理のためでしょうか?
text-animation.js
class TextAnimation {
constructor(el) {
//elには<div class...が入ってる
console.log(el);
this.DOM = {};
// 順番おかしい 分割された値が出てくる。
const test = document.querySelector(el);
console.log(test);
if(el instanceof HTMLElement) {
this.DOM.el = el;
} else {
this.DOM.el = document.querySelector(el);
}
this.chars = this.DOM.el.innerHTML.trim().split("");
this.DOM.el.innerHTML = this._splitText();
}
_splitText() {
return this.chars.reduce((acc, curr) => {
curr = curr.replace(/\s+/, ' ');
return `${acc}<span class="char">${curr}</span>`;
}, "");
}
animate() {
this.DOM.el.classList.toggle('inview');
}
}
class TweenTextAnimation extends TextAnimation {
constructor(el) {
super(el);
this.DOM.chars = this.DOM.el.querySelectorAll('.char');
}
animate() {
this.DOM.el.classList.add('inview');
this.DOM.chars.forEach((c, i) => {
TweenMax.to(c, .6, {
ease: Back.easeOut,
delay: i * .05,
startAt: { y: '-50%', opacity: 0},
y: '0%',
opacity: 1
});
});
}
}
main.js
document.addEventListener('DOMContentLoaded', function () {
//Intersectionは交差、Observerは監視する物。
//<div class="animate-title"...</div>挟まれた要素まで取得できる。allだから同じ物をリストにして返してくれる。
//監視したい要素がリストで格納される。
const els = document.querySelectorAll('.animate-title');
//このentriesはio.observe(child)、io.observe(child2)...のように監視する対象が複数ある場合にこちらにentriesに格納される。
//関数だから順番は合ってる。コールバック関数として渡される。
const cb = function(entries, observer) {
entries.forEach(entry => {
if(entry.isIntersecting) {
// entry.targetはelに値する。
// 最初はentry.targetが.animate-titleだった。
const ta = new TextAnimation('.animate-title')
ta.animate();
//entry.target.classList.add('inview');
// 監視を停止するには
observer.unobserve(entry.target);
} else {
// console.log('out view');
// entry.target.classList.remove('inview');
}
});
//alert('intersectiong');
}
const options = {
//交差対象にしたい親の要素を設定する事ができる。
//今は画面に入るか入らないかだけど、それをタグないに入るかどうかで設定できる?
root: null,
//上から300pxの所で交差するように設定できる。
//左右にも値を設定すると交差してない事になる。pxか%を付けないないとエラーになる。
// 上 右 下 左
rootMargin: "0px",
//交差する部分の位置を設定できる。内側が0で外側が10.5で真ん中でも動作可能にする。
threshold: 0
}
const io = new IntersectionObserver(cb, options);
// queryselectorAllで取得したdiv要素
els.forEach(el => io.observe(el));
});
自分の想定では分割前の <div class="animate-title"...
が出力されると思っていましたが、実際には分割された物がconsole.logで出力されました。
もう一つ気になった事が、コンストラクタ 内で下記のように変数を使用できると思っていたのですが、thisを付けないとtestは未定義と出ます。
test = document.querySelector(el);
console.log(test);
Pythonでは似たような書き方でself無しでも実行できました。
この違いは非同期処理・同期処理の違いによるものなのでしょうか?
Python での記述例:
class Person:
def __init__(self, name, age):
name2 = name
print(name2)
self.age = age
taro = Person('太郎', 18)
# 結果:太郎
すいません。よろしくお願いします。
追記すいません。
index.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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section>
<div class="animate-title">Start where you are.</div>
</section>
<section>
<div class="animate-title">Use what you have.</div>
</section>
<section>
<div class="animate-title">Do what you can.</div>
</section>
<script src="text-animation.js"></script>
<script src="main.js"></script>
</body>
</html>
const test = 1
、let test = 1
、var test = 1
などとすると宣言と代入を同時に行うことができます。それと、分割されたものとはなんでしょうか。返り値のサンプルなりがないと憶測での回答になるので質問者様、回答者にとって効率が良くないのであるとお互いハッピーだと思います!