こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSS transformで完了後戻らないように

タイトルの通りですが、transform: translateで移動後、完了イベントでjsの処理を呼んでいるのですが
その後、移動のアニメーションが初期の位置に戻ってしまいます。

-webkit-transform: translate(100px , 0px);

戻らないようにするにはどうすれば良いでしょうか。

投稿日時 - 2014-08-30 15:49:23

QNo.8736075

すぐに回答ほしいです

質問者が選んだベストアンサー

bind/unbindはもう古いのでon/offを使いましょう。

検証してないけど、
$("#pic").removeClass("trans");
が原因なんじゃないですかね?
こちらは何のための処理ですか?

また
$("#pic").removeClass("trans");
$("#pic").attr('src', '');

$("#pic").removeClass("trans").attr('src', '');
とつなげて書くことができます。

投稿日時 - 2014-08-31 14:03:58

お礼

removeClass消したらうまくいきました!
ありがとうございます。

bindもonに変更しました!
ありがとうございます!

投稿日時 - 2014-08-31 16:18:29

ANo.2

このQ&Aは役に立ちましたか?

9人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

それは何かのタイミングでcssをリセットされていると思うんですが
どのように書いているんでしょうか?

投稿日時 - 2014-08-30 23:35:55

補足

ソース全てを掲載するのは難しいのですが、
大まかには下記のような感じで書いております。
アニメーション完了後にアップロードするようなイメージです。

JavaScript---------------------------------

$("#pic").unbind(animationEndEvt);
$("#pic").bind(animationEndEvt, upload);
$("#pic").addClass("trans");

function upload() {

//アップロード処理(省略)

$("#pic").removeClass("trans");
$("#pic").attr('src', '');
$("#file").val("");

alert('送信完了!');

window.location.reload();//ページをリロード

}


CSS-------------------------

#pic.trans{


-webkit-transform: translate(-100px,0px);
-webkit-transition-timing-function:ease-in;
-webkit-transition-duration:1.5s;

}

投稿日時 - 2014-08-31 00:43:53

あなたにオススメの質問