Let's change 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'}}
]},
])
}
}
Let's change 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>
You can change the properties of an object after a certain amount of time by calling $f.timeline.
$f.timeline takes an array as an argument.
The argument array is an associative array with ms key and prop key.
The ms element defines how many milliseconds after which the property value changes.
The prop element defines the property value to change.
The prop element is an array, and the elements of the array are associative array with obj key and value key.
The obj element is an object that changes the property value.
The value element is a property value. If the property value is a function, the return value of the function will be the property value.
Next page Frame
table of contents