質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1123閲覧

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

Yuki2

総合スコア52

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/05/15 12:35

編集2021/05/15 15:34

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 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/05/15 12:54

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

2021/05/15 15:33

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

回答3

0

自己解決

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

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

Yuki2

総合スコア52

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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')

投稿2021/05/16 08:07

Yuki2

総合スコア52

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yuki2

2021/05/16 08:08

buttonにする方法を試してみました。 submit();を明示的に実行する手段があれば教えていただきたいです。
guest

0

  • buttonのtypeをbuttonにする

もしくはsubmitボタンのclickイベント冒頭でEvent.preventDefault()でsubmitをOFF

  • そのアニメーションとやらが終わったタイミングを取り、form submitをJavaScriptで実行

「PHPへ移行した」と書かれてますが、これは認識として正確には間違っています。
form送信はaction属性の設定値に向けてリクエストを送るものです。
「移行」「画面遷移」とはちょっと違います。
「formの内容を送る」「指定先にリクエストを送る」と認識してください。

なので、リクエスト送信先がそのリクエストを受け取る処理があるかどうか別にして、全く関係ないURLを指定することもできます(ちゃんとしたところならその手のリクエストを拒否できるようにされてると思いますが)

投稿2021/05/16 00:56

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yuki2

2021/05/16 07:44

ありがとうございます。 submitをoffにしてからそれを再びonにする方法について調べてみたのですがjQueryの情報がたくさん出てきました。 普通のJavaScriptでコレを実行することは可能ですか? もし可能なのであればヒントを教えていただきたいです。
Yuki2

2021/05/16 08:14

ありがとうございます。 この方法は知りませんでした、驚きです。 コード練り直してみます。
m.ts10806

2021/05/16 09:18

JavaScriptの基本は「要素の操作」です。 大抵のことはできます。
Yuki2

2021/05/16 10:30

とても感謝しております。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問