javascript - 新item进入时状态为true，5秒后状态为false

Question

我正在创建一个监控聊天的系统，当我输入新的捐赠时我想显示一个 gif，然后让它在 5 秒后显示，比如改变一个变量的状态在它进入一个新的捐赠的那一刻为真，然后在 5 秒后将其更改为假。但我不知道如何使用 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 为真，5 秒后为假，因此显示 GIF 并5 秒后再次隐藏

Answer 1

您可以使用观察器来观察对 showAnimatedGif 的更改，然后在处理程序中执行 setTimeout。此超时将在 x 毫秒后将 bool 值切换回 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>