vue监听用户离开页面并根据离开次数设置判断-可用于微信浏览器

代码已上传至github
github代码地址：https://github.com/Miofly/mio.git

动画效果的处理遇到的一个问题，当用户离开页面再回来时我会更换一张图片，同时给图片加上晃动的动画效果

但是如果animation直接写死，只会触发一次，当用户离开页面再回来时动画效果并不会再次触发。

此时只需要把相同的动画css复制一份，改一下动画名称，然后在页面离开事件中处理即可。下面为代码示例

<div v-if="!modalStatus" style="position: fixed;left: 0;top: 30%;text-align: center;width: 100%;"
	 :style="{animation: animationStyle}">
	<img style="width: 3.2rem;height: 1.68rem" :src="modal">
</div>

 

mounted() {
    document.addEventListener('visibilitychange', this.handleVisiable)
},

destroyed() {
    document.removeEventListener('visibilitychange', this.handleVisiable)
},

监听页面离开事件

methods: {
    handleVisiable(e) { // 监听页面离开事件
        this.num = this.num + 1
        if (e.target.visibilityState === 'visible' && this.num == 3) { // 第一次离开
            this.modal = '../../img/qq/Tips2.png'
            this.animationStyle = 'shake2 2s linear 0s 1'
        }
        if (e.target.visibilityState === 'visible' && this.num == 5) { //
            this.modal = '../../img/qq/Tips3.png'
            this.animationStyle = 'shake 2s linear 0s 1'
        }
        if (e.target.visibilityState === 'visible' && this.num == 7) { //
            this.modalStatus = true
        }
    },
},