難しさは、レンダリングされた要素に移行

Question

Vueの2.1.10

私は電子メールの招待を送信するための責任があるコンポーネントを持っています。ユーザは電子メールアドレスを入力ボックスに入力し、ボタンをクリックすると、サーバに要求が送信されます。サーバーの応答は、コンポーネントのinviteResponseプロパティに割り当てられます。次に、div要素が表示されます。

<div v-if="inviteResponse != ''">{{ inviteResponse }}</div> 

表示されてから3秒後に、このメッセージはゆっくりと消えてしまいます。私はVue Transition Effectsを使ってこれを動作させようとしてきましたが、今まで運がなかったのです。

<transition name="element-fade" appear> 
    <div v-if="inviteResponse != ''">{{ inviteResponse }}</div> 
</transition> 

CSSルールをコンポーネント上：

<style scoped> 
.element-fade-leave { 
    opacity: 1; 
} 
.element-fade-leave-active { 
    transition: opacity 3s ease; 
    transition-delay: 3s; 
} 
.element-fade-leave-to { 
    opacity: 0; 
} 
</style> 

がofficial guideによると、Vueのは自動的に、これらを検出する必要があり、不透明度1で残し要素を開始し、その後、3の後にここで私が試したものです第2の遅延は、それがなくなるまで3秒間にわたってそれを遷移させる。

私の場合でも、絶対に何も起こりません。

Answer 1

メッセージを非表示にするには、コードのどこかにinviteResponse = ''を設定する必要があります。したがって、v-ifの文はfalseになります。私は設定した場合、あなたのコールバック関数で例えば

、サーバの応答を受け取った後、あなたは if (this.inviteResponse) { setTimeout(function() { this.inviteResponse = '' }, 3000); }