Vue滑动隐藏图标效果

Vue实现固定定位图标滑动隐藏效果

页面滚动前

页面滚动后

<template>
<!-- 注意：我这里是Vue3，所以最外层没有套一个div盒子 -->
    <!-- <router-view></router-view> -->
    <div class="main">
        <div class="toAsk" :class="[ !transition ? 'fixed-transition' : '']" @click="toAsk">
            <img src="http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-01/10/cGSADphpNnphGe1641795949220110.png"
                alt="">
        </div>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                transition: true,
                timer: null

            }
        },
        mounted() {
            /**
             * @description 监听页面滑动**/
            window.addEventListener('scroll', this.handleScroll);
        },
        methods: {
            /**
             * @description 页面滑动
             * 监听滑动事件，每次进行滑动时，触发动画，添加定时器，1.4s后显示该图标
             * 
             * **/
            handleScroll() { 
                this.transition = false;
                if (this.timer) { // 判断是否已存在定时器
                    clearTimeout(this.timer);
                }
                this.timer = setTimeout(() => { // 创建定时器，1.4s后图标回归原位置
                    this.transition = true;
                }, 1000);
            },

        }
    }
</script>
<style scoped>

    .main {
        height: 120vh;
    }

    .toAsk {
        width: 88px;
        position: fixed;
        right: 10px;
        bottom: 10vh;
        transition: 0.5s ease-in-out;
    }

    .fixed-transition {
        right: -60px;
        opacity: 0.4;
        transition: 0.5s ease-in-out;
    }

    img {
        max-width: 100%;
    }
</style>