実現したいこと
リセットボタンをクリックしたらboxが元の位置に戻るコードを記述したいです。
現時点でこのサイトにて教えていただいたコードで
1.boxをクリックしたら、右に500px、下に300px動く
2.動いている最中はクリックしてもアニメーションは動かない
3.リセットボタンを二回押したらboxが元の位置に移動する。
※アニメーションが動いてる間にリセットボタンを押すと、アニメーションが終わった時に戻ってしまう。
というのを教えていただきました。
そこでこれの３番と※を
・一回リセットボタンを押しただけで元の位置に戻る
・アニメーションが終わるまでにリセットボタンをクリックしても、boxは元の位置に戻らない
というふうにしたいです。
そこで自分でコードを以下のように書き換えました。
・sw = 0を作成して、
「もし０ならboxslideAnimationを実行する、実行の最後にsw=1にする。
0だったら何もしない。」
「もし1ならstyleResetを実行する、実行の最後にsw=0にする。
もし0なら何もしない。」
というつもりでコードを記述したのですが、その結果
1.boxをクリックしたらboxslideAnimationが実行、sw＝１になる。
2.リセットを二回押すとsw=0になるが、boxが元の位置に戻らない
3.この状態で移動し切っているboxを押すと、開始地点の戻って動き始める
という状態になってしまいました。
Q1.なぜ二回押さないとsw＝０が代入されないのでしょうか？
Q2.なぜsw == 1なのに、中身のboxが元の位置に戻る内容が実行されないのでしょうか？
前提
ここに質問の内容を詳しく書いてください。
（例）
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
元のソースコード
Javascript
1<body>2 <div class="place">3 <button onclick="styleReset()">リセット</button>4 <div id="box" onclick="boxslideAimation(this,[500,300],2000)">5 <p>box</p>6 </div>7 </div>8 <script>9 10 function boxslideAimation(element,distances,duration){11 12 if(element.matches('[data-active]')) return false;13 element.dataset.active=114 15 const myKeyframe= new KeyframeEffect(16 element,[17 {transform: `translate(0px,0px)`},18 {transform: `translate(${distances[0]}px,${distances[1]}px)`},19 ],20 {duration,fill: "forwards" }21 );22 const myAnime = new Animation(myKeyframe,document.timeline);23 myAnime.play();24 25 }26 27 function styleReset(){28 29 delete(box.dataset.active);30 boxslideAimation(box,[0,0],0);31 delete(box.dataset.active);32 33 }34 </script>35</body>
いただいたコードの自分でif文を付け加えたソースコード
Javascript
1<body>2 <div class="place">3 <button onclick="styleReset()">リセット</button>4 <div id="box" onclick="boxslideAimation(this,[500,300],2000)">5 <p>box</p>6 </div>7 </div>8 <script>9var sw = 0;10console.log(sw)11 12 function boxslideAimation(element,distances,duration){13 if(sw == "0"){14 if(element.matches('[data-active]')) return false;15 element.dataset.active=116 17 const myKeyframe= new KeyframeEffect(18 element,[19 {transform: `translate(0px,0px)`},20 {transform: `translate(${distances[0]}px,${distances[1]}px)`},21 ],22 {duration,fill: "forwards" }23 );24 const myAnime = new Animation(myKeyframe,document.timeline);25 myAnime.play();26 27 sw = 128 console.log(sw)29 }else if(sw = "1"){30 }31 }32 33 function styleReset(){34 console.log(sw)35 36 if(sw == "1"){37 delete(box.dataset.active);38 boxslideAimation(box,[0,0],0);39 delete(box.dataset.active);40 41 sw = 042 43 }else if(sw == "0"){44 }45 }46 </script>47</body>
0 コメント