困難Vue的轉換上渲染的元素

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第二次延遲在3秒內過渡，直到它消失。

就我而言，絕對沒有任何反應。

Answer 1

你應該爲了躲你的消息集inviteResponse = ''地方在你的代碼。因此v-if聲明變爲false。

例如，在你的回調函數接收服務器響應後，你可以 if (this.inviteResponse) { setTimeout(function() { this.inviteResponse = '' }, 3000); }