animation css non prise en compte aleatoirement
bonjour, j'essaie de mettre en place un system de "page qui defile" full-page & non-stop avec une bare de chargement.
j'ai 2 question :
pour une raison de simplicite, je ne veux utiliser qu'1 seule variable de temps qui serai commune au JS & CSS
1) est-il mieux de la definir en CSS, et de la recuperer en JS, oubien de la definir en JS, et le JS va definir le CSS ? (dans mon exemple, je la definie en CSS, et le JS va la recuperer)
2) pourquoi, aleatoirement, mon animation de #timer (bare de chargement) n'a pas sa transition qui s'active ? (est-ce un probleme de timing pour l'ajout de la class .loading ?
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div id="container">
<div class="slider" data-num-slide="1" data-display="true">
<div class="title">slide 1</div>
</div>
<div class="slider" data-num-slide="2">
<div class="title">slide 2</div>
</div>
<div class="slider" data-num-slide="3">
<div class="title">slide 3</div>
</div>
<div class="slider" data-num-slide="4">
<div class="title">slide 4</div>
</div>
<div class="slider" data-num-slide="5">
<div class="title">slide 5</div>
</div>
</div> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| :root {
--main-color-h: 208;
--main-color-s: 50%;
/* 2 variables (js & css) cannot concat with ms in transition... */
--loader-time-js: 3000; /* ms */
--loader-time-css: 3000ms;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
overflow: hidden;
}
.slider {
width: 100%;
height: 0;
position: relative;
font-size: 2em;
color: #fff;
}
.slider[data-display="true"] { height: 100%; }
.slider[data-num-slide="1"] { background-color: hsl(var(--main-color-h) var(--main-color-s) 30%); } /* testing... */
.slider[data-num-slide="2"] { background-color: hsl(var(--main-color-h) var(--main-color-s) 35%); } /* testing... */
.slider[data-num-slide="3"] { background-color: hsl(var(--main-color-h) var(--main-color-s) 40%); } /* testing... */
.slider[data-num-slide="4"] { background-color: hsl(var(--main-color-h) var(--main-color-s) 45%); } /* testing... */
.slider[data-num-slide="5"] { background-color: hsl(var(--main-color-h) var(--main-color-s) 50%); } /* testing... */
.slider .title {
position: absolute;
top: 1em;
left: 50%;
}
#timer {
position: fixed;
top: 0;
left: 0;
height: 5px;
width: 0;
background-color: hsl(0 0% 0% / 50%);
z-index: 1;
}
#timer.loading {
width: 100%;
transition: width var(--loader-time-css) linear;
} |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| let stopLoad = false;
/*setTimeout(() => {
stopLoad = true;
}, 1E4);*/
const TIMER = getComputedStyle(document.documentElement).getPropertyValue('--loader-time-js');
let $timer;
function removeTimer() {
if($timer) {
$timer.remove();
}
}
function createTimer() {
$timer = document.createElement('div');
$timer.id = 'timer';
document.body.append($timer);
setTimeout(() => {
requestAnimationFrame(() => { // testing solutions for #timer bug
$timer.className = 'loading';
});
});
}
function updateSlide() {
removeTimer();
if(stopLoad) { return; }
createTimer();
setTimeout(() => {
const currentDisplay = document.querySelector('.slider[data-display="true"]');
let nextDisplay = document.querySelector('.slider[data-display="true"] + div.slider');
if(!nextDisplay) {
nextDisplay = document.querySelector('.slider');
}
delete currentDisplay.dataset.display;
nextDisplay.dataset.display = true;
updateSlide();
}, TIMER);
}
updateSlide(); |
