src/js/modules/index.jsを修正しましょう
export class Index {
constructor() {
}
sample_click(event) {
$f.timeline([
{'ms': 0, 'prop': [
{'obj': this.bind1, 'value': {'style': {'color': 'white', 'backgroundColor': 'black', 'position': 'relative', 'left': '0px' }, 'textContent': () => {return (new Date());}}},
{'obj': this.bind2, 'value': {'style': {'color': 'red', 'backgroundColor': 'blue', 'position': 'relative', 'left': '0px' }, 'textContent': '0'}}
]},
{'ms': 20, 'prop': [
{'obj': this.bind1, 'value': {'style': {'color': 'white', 'backgroundColor': 'black', 'position': 'relative', 'left': '10px' }, 'textContent': () => {return (new Date());}}},
{'obj': this.bind2, 'value': {'style': {'color': 'red', 'backgroundColor': 'blue', 'position': 'relative', 'left': '10px' }, 'textContent': '20'}}
]},
{'ms': 40, 'prop': [
{'obj': this.bind1, 'value': {'style': {'color': 'white', 'backgroundColor': 'black', 'position': 'relative', 'left': '20px' }, 'textContent': () => {return (new Date());}}},
{'obj': this.bind2, 'value': {'style': {'color': 'red', 'backgroundColor': 'blue', 'position': 'relative', 'left': '20px' }, 'textContent': '40'}}
]},
{'ms': 60, 'prop': [
{'obj': this.bind1, 'value': {'style': {'color': 'white', 'backgroundColor': 'black', 'position': 'relative', 'left': '30px' }, 'textContent': () => {return (new Date());}}},
{'obj': this.bind2, 'value': {'style': {'color': 'red', 'backgroundColor': 'blue', 'position': 'relative', 'left': '30px' }, 'textContent': '60'}}
]},
{'ms': 80, 'prop': [
{'obj': this.bind1, 'value': {'style': {'color': 'white', 'backgroundColor': 'black', 'position': 'relative', 'left': '40px' }, 'textContent': () => {return (new Date());}}},
{'obj': this.bind2, 'value': {'style': {'color': 'red', 'backgroundColor': 'blue', 'position': 'relative', 'left': '40px' }, 'textContent': '80'}}
]},
{'ms': 100, 'prop': [
{'obj': this.bind1, 'value': {'style': {'color': 'white', 'backgroundColor': 'black', 'position': 'relative', 'left': '50px' }, 'textContent': () => {return (new Date());}}},
{'obj': this.bind2, 'value': {'style': {'color': 'red', 'backgroundColor': 'blue', 'position': 'relative', 'left': '50px' }, 'textContent': '100'}}
]},
{'ms': 120, 'prop': [
{'obj': this.bind1, 'value': {'style': {'color': 'white', 'backgroundColor': 'black', 'position': 'relative', 'left': '60px' }, 'textContent': () => {return (new Date());}}},
{'obj': this.bind2, 'value': {'style': {'color': 'red', 'backgroundColor': 'blue', 'position': 'relative', 'left': '60px' }, 'textContent': '120'}}
]},
])
}
}
src/page/index.htmlを修正しましょう
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
<div data-obj="bind1">bind1</div>
<div data-obj="bind2">bind2</div>
<div><button data-name="sample">sample</button></div>
</body>
</html>
$f.timelineで一定時間後にオブジェクトのプロパティを変更することができます
$f.timelineは配列を引数とします
引数の配列内はms要素、prop要素を持つ連想配列となります
ms要素は何ミリ秒後にプロパティ値を変更するかを定義します
prop要素は変更するプロパティ値を定義します
prop要素は配列で、配列の要素はobj要素、value要素を持つ連想配列です
obj要素はプロパティ値を変更するオブジェクトです
value要素はプロパティ値です。プロパティ値が関数の場合、関数の戻り値がプロパティ値になります