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

您应该在代码中的某处设置<ons-list modifier="inset" id="myListElement"> <ons-list-header >My Inset listdc</ons-list-header> <ons-list-item modifier="longdivider" tappable>Item A</ons-list-item> <ons-list-item modifier="longdivider" tappable>Item B</ons-list-item> <ons-list-item modifier="longdivider" tappable>Item C</ons-list-item> </ons-list>以隐藏您的消息。因此inviteResponse = ''语句变为v-if。

例如，在收到服务器响应后的回调函数中，您可以false

渲染元素上的Vue转换难度很大

1 个答案: