環境・言語

Chrome, Opera, FireFox (2019/12/15現在最新版)
HTML, CSS, Java Script(anime.js)

問題点

題名通りだが、同じ属性でanimation終わる前に次のanimation発動された場合、どのようにして最初のanimationをstopさせるか?

コード

CODE PEN
↑
こちらで実際に動きが分かります

#####▼問題が起きないやり方
①「touch!」の場所にマウスを持っていく
②赤、青どちらのanimationが終了(大きくなる)
③マウスをtouch!の場所から外す
→大きさが元に戻る

#####▼問題が起きる方法
①「touch!」の場所にマウスを持っていく
②赤、青のanimationが終了する前にtouch!の場所からマウスを外す
→また大きくなる

対処法

codepen内でコメントアウトしてある下記コードのコメントアウトを外すと問題は解決する
→これじゃない方法、もっと良い方法などあればご回答お願いしたいです。

bigBlue.pause();

コード (Codepen内と同じですが記載しておきます)

html
1<!doctype html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport"
6          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
9    <title>test</title>
10</head>
11<body>
12
13<div id="red">touch!</div>
14<div id="blue"></div>
15
16</body>
17</html>

css
1#red {
2    padding: 15px;
3    position: absolute;
4    border-radius: 50%;
5    top: 50%; left: 50%;
6    background: #ba2e0c;
7    color: white;
8    cursor: pointer;
9}
10
11#blue {
12    width: 50px;
13    height: 50px;
14    position: absolute;
15    top: 40%; left: 40%;
16    background: #2a65a7;
17}

JS
1window.onload = () => {
2    let mouseLeftAnimate = false;
3
4    document.getElementById('red').addEventListener('mouseenter', () => {
5        const bigRed = anime({
6            targets: '#red',
7            scale: [1, 2],
8            duration: 900,
9            update: () => {
10                if (mouseLeftAnimate) {
11                    //bigRed.pause();//**ここのコメントアウトを外すと解決はする
12                }
13            },
14            begin: () => {
15                document.getElementById('red').addEventListener('mouseleave', () => {
16                    mouseLeftAnimate = true;
17
18                    const smallRed = anime({
19                        targets: '#red',
20                        scale: [2, 1],
21                        duration: 300,
22                        easing: 'easeInOutQuad',
23                        complete: () => {
24                            console.log("complete getting small red");
25                        }
26                    });
27
28                    const smallBlue = anime({
29                        targets: '#blue',
30                        scale: [2, 1],
31                        delay: 200,
32                        duration: 300,
33                        easing: 'easeInOutQuad',
34                        complete: () => {
35                            console.log("complete getting small blue");
36                            mouseLeftAnimate = false;
37                        }
38                    });
39                });
40            },
41            complete: () => {
42                console.log("complete getting BIG red");
43            }
44        })
45
46        const bigBlue = anime({
47            targets: '#blue',
48            scale: [1, 2],
49            delay: 200,
50            duration: 900,
51            update: () => {
52                if (mouseLeftAnimate) {
53                    //bigBlue.pause();//**ここのコメントアウトを外すと解決はする
54                }
55            },
56            complete: () => {
57                console.log("complete getting BIG blue");
58            }
59        })
60    });
61}

行動規範の内容に同意します

回答1件

ベストアンサー

mouseleave 時に止めればいいのでは？

JavaScript
1            // add.
2            begin: () => {
3                bigRed.pause();
4            },

なお、.addEventListener() を外に出さないとたくさんのイベントリスナーがつくことになります。

投稿2019/12/16 02:58

x_x

総合スコア13749

kazoogon

2019/12/16 17:47

小さくなる時に大きくなるanimationを止めるってことですね。　なぜ自分はあんな複雑なことをしていたのか不思議です汗ご回答ありがとうございます :)

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

(anime.js) 同じ属性でanimationが終わる前に、次のanimationにいった場合の対処法

環境・言語

問題点

コード

対処法

コード (Codepen内と同じですが記載しておきます)

関連した質問