Javascript 输入新项目时将状态更改为true，5秒后更改为false

我正在创建一个监控聊天的系统，当我输入一个新捐赠时，我想显示一个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>

从“vuex”导入{mapState}；
const fb=require（“@/firebaseConfig.js”）
导出默认值{
数据（）{
返回{
上次捐款：''，
如果：false，
}
},
计算：{
…映射状态（['userProfile'，'currentUser']）
},
方法：{
toggleAnimatedGif（）{
this.showmanimatedgif=！this.showmanimatedgif
}
},
已创建：函数（）{
var self=这个；
var uid=this.currentUser.uid？this.currentUser.uid:this.userProfile.uid
fb.realtimeDb.ref（`/users/${uid}/investments/`）.on（“child_added”，（snapshot）=>{
var lastItem=snapshot.val（）；
self.$set（self，'last捐赠'，lastItem.昵称）
//这是我想在5秒钟后显示和隐藏GIF的地方
}，函数（errorObject）{
log（“读取失败：+errorObject.code”）；
});
}
}

---

我不知道从哪里开始解决这个问题，但基本上，当一个新项目进入数据库时，使用这个firebase函数，我可以将其识别为一个新项目，希望将showAnimatedGif的状态更改为true，5秒后更改为false，因此要显示GIF并在5秒后再次隐藏

，您可以使用观察程序观察对

showAnimatedGif

的更改，然后在处理程序中执行setTimeout。此超时将在x毫秒后将布尔值切换回false

var mycomponent=new Vue({
el：仪表板，
数据：{
showAnimatedIf:false
},
方法：{
捐赠{
//做点什么，可能会向数据库中添加数据
this.showmanimatedgif=true；//在回调中
}
},
观察：{
showAnimatedGif（）{
if（this.showmanimatedgif）
setTimeout（（）=>this.showmanimatedgif=false，5000）；
}
}
})

.imgwrapper{
高度：100px；宽度：100px；
}
.imgwrapper img{
高度：100%；宽度：自动；
}

捐赠