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

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

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

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2345閲覧

【CSS3/jQuery】transition完了後のtransitionの挙動がおかしい

NobumitsuHata

総合スコア141

CSS3

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2016/12/09 13:36

編集2022/01/12 10:55

bind内のcssアニメーションが、綺麗に0pxから60pxに変わらず、急に60pxになります。

html

1<div id="form"> 2 <div id="title">登録する方</div> 3 <input id="nickname" type="text" placeholder="ニックネーム" autocomplete="off"></input> 4 <input id="email" type="text" placeholder="test@gmail.com" autocomplete="off"></input> 5 <input id="password" type="password" placeholder="パスワード(6文字以上)" autocomplete="off"></input> 6 <input id="password_check" type="password" placeholder="パスワード(確認用)" autocomplete="off"></input> 7 <div id="submit">送信</div> 8 </div> 9 <div id="alert"> 10 <div id="alert_title">Not Found</div> 11 <div id="alert_description"> 12 すでにアカウントが存在します。<br> 13 恐れ入りますが、もう一度やり直してください。 14 </div> 15 </div>

css

1span { 2 display: table-cell; 3 vertical-align: middle; 4 text-align: center; 5} 6 7#register_wrapper { 8 display: table; 9 position: relative; 10 margin: 0 auto; 11 width: 400px; 12 height: 100vh; 13} 14 15 #middle { 16 perspective: 100px; 17 -webkit-perspective: 100px; 18 -ms-perspective: 100px; 19 -o-perspective: 100px; 20 -moz-perspective: 100px; 21 } 22 23 #form { 24 transform: translateZ(0px); 25 -webkit-transform: translateZ(0px); 26 } 27 28 #title { 29 width: 100%; 30 color: #fff; 31 font-size: 18px; 32 font-weight: bold; 33 line-height: 1; 34 text-align: center; 35 } 36 37 #nickname { 38 margin-top: 30px; 39 background: rgba(255,255,255,0); 40 width: 100%; 41 height: 30px; 42 color: #fff; 43 font-size: 16px; 44 line-height: 30px; 45 outline: 0; 46 border-top: none; 47 border-right: none; 48 border-left: none; 49 border-radius: 0; 50 border-bottom: 2px solid #93CFF4; 51 } 52 53 #nickname:placeholder-shown { 54 color: #58656F; 55 } 56 57 #nickname::-webkit-input-placeholder { 58 color: #58656F; 59 } 60 61 #email { 62 margin-top: 20px; 63 background: rgba(255,255,255,0); 64 width: 100%; 65 height: 30px; 66 color: #fff; 67 font-size: 16px; 68 line-height: 30px; 69 outline: 0; 70 border-top: none; 71 border-right: none; 72 border-left: none; 73 border-radius: 0; 74 border-bottom: 2px solid #93CFF4; 75 } 76 77 #email:placeholder-shown { 78 color: #58656F; 79 } 80 81 #email::-webkit-input-placeholder { 82 color: #58656F; 83 } 84 85 #password { 86 margin-top: 20px; 87 background: rgba(255,255,255,0); 88 width: 100%; 89 height: 30px; 90 color: #fff; 91 font-size: 16px; 92 line-height: 30px; 93 outline: 0; 94 border-top: none; 95 border-right: none; 96 border-left: none; 97 border-radius: 0; 98 border-bottom: 2px solid #93CFF4; 99 } 100 101 #password:placeholder-shown { 102 color: #58656F; 103 } 104 105 #password::-webkit-input-placeholder { 106 color: #58656F; 107 } 108 109 #password_check { 110 margin-top: 20px; 111 background: rgba(255,255,255,0); 112 width: 100%; 113 height: 30px; 114 color: #fff; 115 font-size: 16px; 116 line-height: 30px; 117 outline: 0; 118 border-top: none; 119 border-right: none; 120 border-left: none; 121 border-radius: 0; 122 border-bottom: 2px solid #93CFF4; 123 } 124 125 #password_check:placeholder-shown { 126 color: #58656F; 127 } 128 129 #password_check::-webkit-input-placeholder { 130 color: #58656F; 131 } 132 133 #submit { 134 display: inline-block; 135 margin-top: 30px; 136 padding: 10px 20px; 137 color: #b0dcf6; 138 font-size: 16px; 139 font-weight: bold; 140 line-height: 1; 141 border: 2px solid #93CFF4; 142 border-radius: 5px; 143 } 144 145 #alert { 146 /*display: none;*/ 147 padding: 20px 20px 0; 148 transform: translateZ(60px); 149 -webkit-transform: translateZ(60px); 150 background: rgba(56,56,58,0.3); 151 opacity: 1; 152 overflow: hidden; 153 } 154 155 #alert_title { 156 color: #93CFF4; 157 font-size: 20px; 158 font-weight: bold; 159 line-height: 1; 160 text-align: center; 161 } 162 163 #alert_description { 164 margin-top: calc(25px - (16px * 1.7 - 16px) / 2); 165 margin-bottom: calc(20px - (16px * 1.7 - 16px) / 2); 166 color: #fff; 167 font-size: 16px; 168 font-weight: bold; 169 line-height: 1.7; 170 text-align: center; 171 }

javascript

1 $("#form").fadeOut("nomal", function() { 2 $("#alert").fadeIn("fast", function() { 3 $("#alert").css({ 4 'transition-delay': '0s', 5 'transition-duration': '2s', 6 'transform':'translateZ(0px)', 7 '-webkit-transform': 'translateZ(0px)', 8 'opacity': '1' 9 }); 10 $("#alert").bind('webkitTransitionEnd MozTransitionEnd mozTransitionEnd msTransitionEnd oTransitionEnd transitionEnd',function(){ 11 $("#alert").css({ 12 'transition-delay': '0s', 13 'transition-duration': '2s', 14 'transform':'translateZ(60px)', 15 '-webkit-transform': 'translateZ(60px)' 16 }); 17 }); 18 }); 19 });

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

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

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

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

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

gin

2016/12/09 14:09

htmlの記述もあったほうがいいですよ~。私もそうですが回答者側も1からhtml組んで検証となると敬遠しちゃったりするので。
guest

回答1

0

$().css(); とか fadeIn では無く、CSSで書いてクラスを付与する実装にした方がよいような。

CSS

1#alert { 2 transition: all 2s; 3 -webkit-transform: translate(0px); 4 transform: translate(0px); 5 opacity: 0; 6} 7#alert.action { 8 -webkit-transform: translate(60px); 9 transform: translate(60px); 10 opacity: 1; 11}

JavaScript

1$( '#bt' ).on( 'click', function() { 2 $( '#alert' ).toggleClass( 'action' ); 3} ); 4```**動くサンプル:**[https://jsfiddle.net/3p86osq0/1/](https://jsfiddle.net/3p86osq0/1/) 5 6 7CSSアニメーション 入門 - Qiita】 8[http://qiita.com/soarflat/items/4a302e0cafa21477707f](http://qiita.com/soarflat/items/4a302e0cafa21477707f) 9 10他にも細かくアニメーションを制御するのであれば下記のようなライブラリを使うのも有効です。 11 12【Googleも推奨!アニメーションライブラリTweenMaxの使い方 入門編 | un-Tech】 13[http://un-tech.jp/tweenmax-started/](http://un-tech.jp/tweenmax-started/) 14 15【velocity.jsの使い方 記述方法とオプション機能 | un-Tech】 16[http://un-tech.jp/velocity-basic-option/](http://un-tech.jp/velocity-basic-option/)

投稿2016/12/12 17:43

kei344

総合スコア69366

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問