htmlのformからPHPへ移行した時にアニメーションが無視される問題を解決したい。

PHPページに移行する前にアニメーション（fadeout）を発動させたい。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Service</title>
9    <link rel="stylesheet" href="css/style.css">
10</head>
11
12<body>
13    <section class="content" id="first-content">
14        <div class="content__wrapper">
15            <h1 class="content__title js-animation">What do you learn?</h1>
16            <form action="submit.php" method="post" id="first-form">
17                <div class="content__column js-animation">
18                    <p class="content__text">item: <input type="text" name="item" id="first-input"></p>
19                    <p class="content__at-text none" id="at-text">Please remove text charset!</p>
20                    <button type="submit" id="first-btn">move on</button>
21                </div>
22            </form>
23        </div>
24    </section>
25    <script src="js/script.js"></script>
26</body>
27
28</html>

css
1* {
2  padding: 0;
3  margin: 0;
4}
5
6html {
7  font-size: 62.5%;
8}
9
10body {
11  font-family: cursive;
12  display: -webkit-box;
13  display: -ms-flexbox;
14  display: flex;
15  -webkit-box-pack: center;
16      -ms-flex-pack: center;
17          justify-content: center;
18  -webkit-box-align: center;
19      -ms-flex-align: center;
20          align-items: center;
21  min-height: 100vh;
22  background: -webkit-gradient(linear, left top, left bottom, from(#1e90ff), to(#00008b));
23  background: linear-gradient(#1e90ff, #00008b);
24  background-size: cover;
25}
26
27input,
28textarea,
29button {
30  font-family: inherit;
31}
32
33.content__title {
34  font-size: 3.6rem;
35  color: #fff;
36  margin-bottom: 2rem;
37}
38
39.content__column {
40  display: -webkit-box;
41  display: -ms-flexbox;
42  display: flex;
43  -webkit-box-pack: center;
44      -ms-flex-pack: center;
45          justify-content: center;
46  -webkit-box-align: center;
47      -ms-flex-align: center;
48          align-items: center;
49  -webkit-box-orient: vertical;
50  -webkit-box-direction: normal;
51      -ms-flex-direction: column;
52          flex-direction: column;
53}
54
55.content__text {
56  font-size: 1.6rem;
57  color: #fff;
58}
59
60.content__at-text {
61  font-size: 1.6rem;
62  color: #fff;
63  margin-bottom: 2rem;
64}
65
66.content button {
67  font-size: 1.6rem;
68  padding: 0.5rem;
69  cursor: pointer;
70}
71
72.is-show {
73  opacity: 1;
74  visibility: visible;
75  -webkit-transform: translateY(0px);
76          transform: translateY(0px);
77  -webkit-transition: all 1s;
78  transition: all 1s;
79}
80
81.js-animation:not(.is-show) {
82  opacity: 0;
83  visibility: hidden;
84  -webkit-transform: translateY(40px);
85          transform: translateY(40px);
86}
87
88.none {
89  opacity: 0;
90  -webkit-transition: all 1s;
91  transition: all 1s;
92}
93
94.fadeout {
95  -webkit-animation: fadeOut 1s;
96          animation: fadeOut 1s;
97  -webkit-animation-fill-mode: both;
98          animation-fill-mode: both;
99}
100
101@-webkit-keyframes fadeOut {
102  0% {
103    opacity: 1;
104  }
105  100% {
106    opacity: 0;
107  }
108}
109
110@keyframes fadeOut {
111  0% {
112    opacity: 1;
113  }
114  100% {
115    opacity: 0;
116  }
117}
118/*# sourceMappingURL=style.css.map */

js
1const firstInput = document.getElementById('first-input');
2const firstBtn = document.getElementById('first-btn');
3
4const max_char = 10;
5const fadeOut = document.querySelector('.fadeout');
6
7let test = 0;
8
9const timerId = setInterval(() => {
10    const js_anime = document.querySelector('.js-animation:not(.is-show)');
11    if (js_anime !== null) {
12        js_anime.classList.add('is-show');
13    } else {
14        clearInterval(timerId);
15    }
16}, 1000);
17
18firstInput.addEventListener('keydown', () => {
19    const itemValue = firstInput.value;
20    const atText = document.getElementById('at-text');
21    if (itemValue.length > max_char) {
22        atText.classList.remove('none');
23    } else {
24        atText.classList.add('none');
25    }
26});
27
28firstBtn.addEventListener('click', (event) => {
29    const itemValue = firstInput.value;
30    if (itemValue !== '' && itemValue.length < max_char) {
31        const content = document.getElementById('first-content');
32        content.classList.add('fadeout');
33        content.addEventListener('animationend', () => {
34            content.remove();
35            setInterval(()=>{
36                event;
37            },1000)
38            //submit解禁
39        });
40    } else if (itemValue.length > 10) {
41        alert('文字数を減らして下さい');
42        event.preventDefault();
43    } else {
44        alert('文字を入力してください');
45        event.preventDefault();
46    }
47});

試したこと

js
1 content.addEventListener('animationend', () => {
2            content.remove();
3            setInterval(()=>{
4                event;
5            },1000)
6            //submit解禁
7        });

m.ts10806

2021/05/15 12:54

どこにもPHPのコードがありませんが、どう関係するのでしょう。

You

2021/05/15 15:33

ご忠告ありがとうございます。

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

回答3件

自己解決

回答者様の意見を参考にコードを練り直したところ、うまくいきました。
本当にありがとうございます。

js
1const firstContent = document.getElementById('first-content');
2const firstForm = document.getElementById('first-form');
3const firstInput = document.getElementById('first-input');
4const firstBtn = document.getElementById('first-btn');
5const acText = document.getElementById('at-text');
6
7let max_char = 10;
8let count;
9let judge = 0;
10
11const timerId = setInterval(() => {
12    const animeEl = document.querySelector('.js-animation:not(.is-show)');
13    if (animeEl !== null) {
14        animeEl.classList.add('is-show');
15    } else {
16        clearInterval(timerId);
17    }
18}, 1000);
19
20firstInput.addEventListener('keyup', (e) => {
21    count = e.target.value;
22    if (count.length > max_char) {
23        acText.classList.remove('none');
24        judge = 1;
25    } else if (count.length < max_char) {
26        acText.classList.add('none');
27        judge = 0;
28    }
29    console.log(count.length);
30});
31
32firstBtn.addEventListener('click', () => {
33    if (judge == 1) {
34        alert('文字数を減らしてください');
35    } else if (firstInput.value === '') {
36        alert('文字を入力してください');
37    } else if (firstInput.value !== '' && count.length < max_char) {
38        firstContent.classList.add('fadeout');
39        firstContent.addEventListener('animationend', () => {
40            firstForm.submit();
41        });
42    }
43});
44

投稿2021/05/16 10:31

You

総合スコア52

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Service</title>
9    <link rel="stylesheet" href="css/style.css">
10</head>
11
12<body>
13    <section class="content" id="first-content">
14        <div class="content__wrapper">
15            <h1 class="content__title js-animation">What do you learn?</h1>
16            <form action="submit.php" method="post" id="first-form">
17                <div class="content__column js-animation">
18                    <p class="content__text">item: <input type="text" name="item" id="first-input"></p>
19                    <p class="content__at-text none" id="at-text">Please remove text charset!</p>
20                    <button type="button" id="first-btn">move on</button>
21                </div>
22            </form>
23        </div>
24    </section>
25    <script src="js/script.js"></script>
26</body>
27
28</html>

firstFormにform.submit();を付与させた。
参考サイト

js
1const firstForm = document.getElementById('first-form');
2// console.log(firstForm);
3const firstInput = document.getElementById('first-input');
4const firstBtn = document.getElementById('first-btn');
5
6const max_char = 10;
7const fadeOut = document.querySelector('.fadeout');
8
9let test = 0;
10
11const timerId = setInterval(() => {
12    const js_anime = document.querySelector('.js-animation:not(.is-show)');
13    if (js_anime !== null) {
14        js_anime.classList.add('is-show');
15    } else {
16        clearInterval(timerId);
17    }
18}, 1000);
19
20firstInput.addEventListener('keydown', () => {
21    const itemValue = firstInput.value;
22    const atText = document.getElementById('at-text');
23    if (itemValue.length > max_char) {
24        atText.classList.remove('none');
25    } 
26});
27
28firstBtn.addEventListener('click',()=>{
29    const itemValue = firstInput.value;
30    if(itemValue.length > max_char){
31        alert('文字数を減らしてください');
32    } else if (itemValue === ''){
33        alert('文字を入力してください');
34    } else if(itemValue.length < max_char && itemValue !== ''){
35        moveOn();
36    }
37})
38
39function moveOn() {
40    const node = document.getElementById('first-content');
41    node.classList.add('fadeout');
42    node.addEventListener('animationend',()=>{
43        firstForm.form.submit();
44    })
45};
46// const fn = window.addEventListener('DOMContendLoaded',()=>{
47// })
48
49// firstBtn.addEventListener('submit')
50
51// firstBtn.addEventListener('submit',()=>{
52//     alert('ok');
53// })
54// firstBtn.addEventListener('click', (event) => {
55//     const itemValue = firstInput.value;
56//     event.preventDefault();
57//     if (itemValue !== '' && itemValue.length < max_char) {
58//         const content = document.getElementById('first-content');
59//         content.classList.add('fadeout');
60//         content.addEventListener('animationend', () => {
61//             content.remove();
62//             firstBtn.onsubmit();
63//         });
64//     } else if (itemValue.length > 10) {
65//         alert('文字数を減らして下さい');
66//         // event.preventDefault();
67//     } else {
68//         alert('文字を入力してください');
69//         // event.preventDefault();
70//     }
71// });
72
73
74// firstBtn.addEventListener('submit')