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

質問

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

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

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

回答No.2

ONEONE · ベストアンサー

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

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

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

お礼

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

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

回答No.1

ONEONE

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

補足

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

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;

}