新项目进入时将状态更改为true并在5秒后更改为false答案

【问题标题】：Changing the state to true when new item enters and changing to false after 5 seconds新项目进入时将状态更改为true并在5秒后更改为false
【发布时间】：2019-04-22 02:27:56
【问题描述】：

我正在创建一个用于监控聊天的系统，当我输入新的捐款时我想显示一个 gif，然后让它在 5 秒后显示，类似于 更改变量的状态在它进入新捐赠的那一刻为 true，然后在 5 秒后将其更改为 false。 但我不知道如何使用 Javascript 和 VueJS 来做到这一点

对这个问题有帮助吗？

<template>
    <div id="dashboard">
        <section>
            <div class="col1">
                <div class="profile">
                    <div>
                        <img v-if="showAnimatedGif" src="https://media.giphy.com/media/OFbrZqxNMu7Ic/giphy.gif" class="donation-gif" alt="">
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>


<script>
    import { mapState } from "vuex";
    const fb = require('@/firebaseConfig.js')

    export default {
        data() {
            return {
                lastDonation: '',
                showAnimatedGif: false,
            }
        },
        computed: {
            ...mapState(['userProfile', 'currentUser'])
        },
        methods: {
            toggleAnimatedGif() {
                this.showAnimatedGif = !this.showAnimatedGif
            }
        },
        created: function () {
            var self = this;
            var uid = this.currentUser.uid ? this.currentUser.uid : this.userProfile.uid

            fb.realtimeDb.ref(`/users/${uid}/donations/`).on("child_added", (snapshot) => {
                var lastItem = snapshot.val();
                self.$set(self, 'lastDonation', lastItem.nickname)
                // THIS IS THE PLACE WHERE I WANT TO SHOW AND HIDE THE GIF AFTER 5 SECONDS
            }, function (errorObject) {
                console.log("The read failed: " + errorObject.code);
            });
        }
    }
</script>

我不知道从哪里开始解决这个问题，但是基本上当一个新项目进入数据库时，使用这个firebase函数我可以将它识别为一个新项目，想改变状态的 showAnimatedGif 为 true，5 秒后为 false，所以 显示 GIF 和 5 秒后再次隐藏

【问题讨论】：

标签： javascript vuejs2

【解决方案1】：

您可以使用观察程序来观察对showAnimatedGif 的更改，然后在处理程序中执行 setTimeout。此超时将在 x 毫秒后将布尔值切换回 false。

var mycomponent = new Vue({
     el: dashboard,
     data: {
         showAnimatedGif: false
     },
     methods: {
         donate(){
            //do something, maybe add data to db
            this.showAnimatedGif = true; //in the callback
         }
     },
     watch: {
        showAnimatedGif(){
         if(this.showAnimatedGif)
             setTimeout(() => this.showAnimatedGif = false, 5000); 
        }
     }
})

.imgwrapper{
height: 100px; width: 100px;
}

.imgwrapper img{
height: 100%; width: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="dashboard">
        <section>
            <div class="col1">
                <div class="profile">
                    <div class="imgwrapper" v-if="showAnimatedGif">
                        <img src="https://media.giphy.com/media/OFbrZqxNMu7Ic/giphy.gif" class="donation-gif" alt="">
                    </div>
                </div>
            </div>
        </section>

         <button @click="donate()">Donate</button>
    </div>

【讨论】：