2017-05-16 12 views
1

ajaxリクエストを実行し、バックグラウンドカラーを変更して小規模の変換を行う要素にクラスを設定するアプリケーションがあります。私はVue.jsを使用しており、erroredSaveプロパティはクラスを設定するプロパティです。javascriptでajaxの後でアニメーションクラスを変更するためのベストプラクティス

関連するコードは次のような次のとおりです。

this.erroredSave = false 

this.$http.post('some/url/', params) 
.then((data) => { 
    // ALL GOOD 
}) 
.catch((errors) => { 
    this.erroredSave = true 
}) 

私は何度もプロセスを実行する場合、要求は非常に迅速に実行するため、アニメーションが頻繁に行われていないと私はJSが持っていないと思いますクラスを完全に解除する必要があります。私は思う...

私は要求を実行する前に小さなタイムアウトの遅延を設定するか、CSSアニメーションが実行されません。 setTimeoutが必要な理由を私はよく分からない

this.erroredSave = false 

setTimeout(() => { 
    this.$http.post('some/url', params) 
    .then((data) => { 
     // ALL GOOD 
    }) 
    .catch((errors) => { 
     this.erroredSave = true 
    }) 
}, 10) 

だから私のコードでは、となってしまいます。なぜ誰かが私に言うことができますか?このタイプのものには標準的な/より良い習慣がありますか?エラー要素の

EDIT

SCSS。違いがあれば、実際にはテーブル行で実行されます。

&.error_row 
{ 
    background: linear-gradient(#ffe0e0 10%, #ffcccc 100%) !important; 
    animation: scaleSuccess 0.25s linear; 
    transform-origin: center center; 
    color: $red; 

    @keyframes scaleSuccess { 
     50% 
     { 
      transform: scale(1.05); 
     } 

     100% 
     { 
      transform: scale(1); 
     } 
    } 
} 

アニメーションは、最初のcalで起動します。ただし、エラーが発生する追加の呼び出しでは、アニメーションが実行されるのを確認するために小さなタイムアウトが必要です。

+0

これはまったく機能しましたか?たぶん私は矢の機能にちょうど錆びているだろうが、「this」は間違ったオブジェクトに束縛されないだろうか? catchの外側で 'this'を指す変数をキャプチャし、そのcatch変数をcatchコールバックで使用してみてください。 – zero298

+0

@ zero298:いいえ。矢印関数は右の 'this'を取得します。 – SLaks

+0

矢印の意味は、独自のコンテキストを持たないことになります。彼らは常に語彙的なコンテキストを持っています。 – Teemoh

答えて

0

似たようなことが一度起こりました。解決策は、animationsの代わりにtransitionsを使用することでした。

あなたがアニメーションを削除/追加すると、変更は突然起こりますが、トランジションでは、現在のエレメントに適用されているCSS値を取り込みます - 他のトランジションの途中で起こったとしても、あなたの意図したCSSの最終的な価値に。

あなたは、AJAX要求の前に背景色を変更し、このようにそれの終わりに再びそれを変更している場合ので、例えば:

$(".ajax-call").click(function(event){ 
    $('body').removeClass().addClass("ajax-ongoing"); 
    $.ajax({ 
    type: 'POST', 
    dataType: 'json', 
    url: '/echo/json/', 
    data : { json: JSON.stringify(jsonData) }, 
    success: function(data) { 
     $('body').addClass("ajax-success"); 
    } 
    }); 
}); 

あなたは、遷移と遷移して、あなたのCSSクラスを設定することができますこのように延期:

body{ 
    background-color: white; 
} 
body.ajax-ongoing{ 
    background-color: orange; 
} 

body.ajax-success{ 
    transition-delay: 1s; 
    transition: all 0.7s ease-in; 
    background-color: green; 
} 

あなたはライブexample here

トランジションは、トランスフォームでうまく動作します見ることができます。また、スケール(N) 。

関連する問題