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

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

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

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

CSS

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

Q&A

解決済

1回答

5688閲覧

jqueryでのcssのtransition transformについて

.mira

総合スコア12

jQuery

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

CSS

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

1グッド

0クリップ

投稿2016/12/08 14:15

###前提・実現したいこと
jqueryのtransitionが効いていない。しかし半角スペースを入れると作動します。
この、半角スペースは必要なのでしょうか?

###発生している問題・エラーメッセージ

半角スペースを挿入しないと、transitionが作動しない。

###該当のソースコード

html

1<div id="test">12/9</div>

css

1#test{ 2 width: 100px; 3 height: 100px; 4 display: flex; 5 justify-content: center; 6 align-items: center; 7 border: 1px solid black; 8 background-color: #343838; 9 color: green; 10 margin: 10px auto 5px 10px; 11 -webkit-transition-property: -webkit-transform; 12}

javascript

1//---成功例------ 2$(function(){ 3 var speed = 500; 4 $("#test").css("-webkit-transition","-webkit-transform "+speed+"ms"); 5 6 $('#test').click(function(e){ 7 var myO = $(this); 8 myO.css("-webkit-transform","translate(500px,0px)"); 9 setTimeout(function(){ 10 myO.css("background-color","#F9F"); 11 },speed); 12 }); 13});

javascript

1//---失敗例----- 2$(function(){ 3 var speed = 500; 4 $("#test").css("-webkit-transition","-webkit-transform"+speed+"ms"); 5 6 $('#test').click(function(e){ 7 var myO = $(this); 8 myO.css("-webkit-transform","translate(500px,0px)"); 9 setTimeout(function(){ 10 myO.css("background-color","#F9F"); 11 },speed); 12 }); 13});

こちらの最後の方のサンプルです

###試したこと
失敗例で試してみたところtransition が効いておらず、クリックしたら瞬間移動のように移動しました。
しかし、失敗例のjqueryの3行目の"-webkit-transform" を
"-webkit-transform " と最後に半角スペースを挿入したらtransitionが効きました。
この、半角スペースは今後も必要なのでしょうか?
それとも、他のコードが何処か間違っているのでしょうか?
どうかご教授ください。

###補足情報(言語/FW/ツール等のバージョンなど)
google chrome
notepad++

k_fujimoto👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

JavaScript

1var speed = 500; 2$("#test").css("-webkit-transition","-webkit-transform"+speed+"ms"); 3```4```JavaScript 5$("#test").css("-webkit-transition","-webkit-transform500ms"); 6```なので、 7```CSS 8#test { 9 -webkit-transition: -webkit-transform500ms; 10 /* ↑ 「何処を変化させるか」と数値が切り分けられていない*/ 11} 12```だから、 13```CSS 14#test { 15 -webkit-transition: -webkit-transform 500ms; /* これが正しい */ 16}

【CSS3 アニメーション(Transitions)の使用方法 | CSS Lecture】
http://www.css-lecture.com/log/css3/css3-transition.html

投稿2016/12/08 17:37

kei344

総合スコア69364

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

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

.mira

2016/12/09 07:07

kei344様、詳しい解説有難うございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問