Propriété AnimationPlayState non modifiable?

**taymia** · 26/10/2018, 18h05

Bonjour à toutes et à tous.

Je débute dans les animations, or je n'arrive pas à modifier la propriété AnimationPlaySate pour passer en paused ou en running.
D'après ma console l'opération est effectuée mais elle reste sans effet

Voici le code complet:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!doctype html>
 
<html>
 
<head>
	<meta charset="utf-8">
 
	<title>
		Caroussel dummies
	</title>
 
	<style>
        
                .strip
                {
                        width:50%;
                        height:300px;
                }
                
                #red-strip
                {
                        background:red;
                }
                
                #green-strip
                {
                        background:green;
                }
        
                #slide
                {
                        height:300px;
                        overflow:hidden;
                }
                
                @-webkit-keyframes movewords
                {
                        0%       {margin-left:100%;top:0px;}
                  100%   {margin-left:-200%;top:0px;}
                }
                
                figure
                {       
                        position:relative;
                        width:300%;
                        display:flex;
                        animation-name:movewords;
                        animation-duration:15s;
                        animation-delay:0s;
                        animation-iteration-count:infinite;
                        animation-play-state:running;
                }
                
                body
                {
                        margin:0;
                        padding:0;
                }
        
        </style>
</head>
 
<body>
<div id="slide">
<figure>
<div id="red-strip" class="strip"></div>
<div id="green-strip" class="strip"></div>
</figure>
</div>
<button type="button" id="stop">Pause</button>
<button type="button" id="action">Action</button>
 
<script>
 
window.addEventListener("load",registerEvent,false);
 
function registerEvent(e)
{
        console.log("registerEvent");
        document.getElementById("stop").addEventListener("click",stoper,false);
        document.getElementById("action").addEventListener("click",actionner,false);
}
 
function stoper()
{
        console.log("stoper");
        document.getElementById("figure").style.webkitAnimationPlayState = "paused";
        document.getElementById("figure").style.AnimationPlayState = "paused";
}
 
function actionner()
{
        console.log("actionner");
        document.getElementById("figure").style.webkitAnimationPlayState = "running";
        document.getElementById("figure").style.AnimationPlayState = "running";
}
 
 
 
</script>
 
</body>
 
</html>

Merci d'avance pour votre attention.

**NoSmoking** · 27/10/2018, 09h28

Bonjour,

document.getElementById("figure")

• tu n'as aucun élément ayant pour ID figure.

• autant respecter la syntaxe CSS -> JS, animation-play-state -> animationPlayState.

• « stoper » prend 2p -> stopper

**taymia** · 27/10/2018, 10h03

Bonjour NoSmoking,

Étant débutant j'ai fait une erreur de débutant. Et ce n'est pas faute d'avoir cherché.
Comme quoi il faut toujours commencer par les choses les plus simples.
Merci pour ton aide.

Propriété AnimationPlayState non modifiable?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager