###前提・実現したいこと
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++
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/09 07:07