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で起動します。ただし、エラーが発生する追加の呼び出しでは、アニメーションが実行されるのを確認するために小さなタイムアウトが必要です。
これはまったく機能しましたか?たぶん私は矢の機能にちょうど錆びているだろうが、「this」は間違ったオブジェクトに束縛されないだろうか? catchの外側で 'this'を指す変数をキャプチャし、そのcatch変数をcatchコールバックで使用してみてください。 – zero298
@ zero298:いいえ。矢印関数は右の 'this'を取得します。 – SLaks
矢印の意味は、独自のコンテキストを持たないことになります。彼らは常に語彙的なコンテキストを持っています。 – Teemoh