vue实现Window10日历动画效果

自从从事了前端行业，就得了个职业病，就是看到任何界面的效果都会思考自己怎么实现，这不看见Window10的日历系统，就动起了歪心思，想复现这个效果。

image

效果分析

边框的可见是跟随鼠标位置来改变，鼠标hover的日期显示边框，鼠标点击过的日期显示边框

实现思路

利用两个盒子的堆叠，在上面的盒子只显示日期，下面的盒子有边框，在鼠标周围区域透明显示下面盒子的信息，鼠标hover和点击简单就不赘述了。

两个盒子堆叠简单，利用position的层级就可以实现，问题是怎么只让鼠标周围的区域透明显示，这里我想到了一个陈迹多年的css属性clip，clip是老式的剪切属性，必须要absolute或者fixed定位的元素才能使用，并且只能剪裁正方形，他有个升级版clip-path对元素的定位没有要求，而且也可以剪裁更多的形状，可以剪切圆形，他剪切后的标签会显示底层的内容，这个属性放置在上层盒子上，监听鼠标位置动态设置clip-path的位置即可。

代码

<template>
    <div class="mag">
        <div class="magBox clearfix" :style="`-webkit-clip-path: circle(25% at ${mouseX}px ${mouseY}px);`">
            <div v-for="(item, index) in data" :key="index"></div>
        </div>
        <div class="magBox shadowBox clearfix" @mousemove='touchmoveFn'>
            <div v-for="(item, index) in data" :key="item" @click='activeNum = index' :class="{'isActive': index == activeNum}">{{item}}</div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            mouseX: 0,
            mouseY: 0,
            data: [],
            isActive: [],
            activeNum: null,
            boxX: 0,
            boxY: 0,
            boxWidth: 0,
            boxHeight: 0,
        }
    },
    mounted() {
        // 1.获取盒子对应页面上的位置和宽高
        let box = document.querySelector('.magBox')
        this.boxX = box.offsetLeft
        this.boxY = box.offsetTop
        // 需要待到盒子已经生成后获取宽高要不获取的高度不对
        this.$nextTick(() => {
            this.boxWidth = box.offsetWidth
            this.boxHeight = box.offsetHeight
        })
        // 2.遍历设置日期
        for (let index = 0; index < 30; index++) {
            this.data.push(index + 1)
            this.isActive.push(false)
        }
    },
    methods: {
        // 3.鼠标移动的方法
        touchmoveFn(e) {
            // 当前鼠标位置减去盒子位置即可   由于我们盒子有translate(-50%, -50%)的问题 需要再加上盒子宽高的一半才是正确的鼠标相对于盒子的位置
            this.mouseX = e.pageX - this.boxX + this.boxWidth / 2
            this.mouseY = e.pageY - this.boxY + this.boxHeight / 2
        }
    }
}
</script>
<style lang="scss" scoped>
.mag {
    position: relative;
    width: 100vw;
    height: 100vh;
}
.magBox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 364px !important;
    padding-bottom: 4px;
    z-index: 1;
    div {
        float: left;
        width: 50px;
        height: 50px;
        text-align: center;
        box-sizing: border-box;
        margin: 2px 0 0 2px;
        line-height: 46px;
        border: 2px solid rgba(200, 200, 200, 0.5)
    }
}
.shadowBox {
    div {
        border: none;
        line-height: 50px;
    }
    div:hover {
        line-height: 46px;
        border: 2px solid rgba(6, 63, 250, 0.3)
    }
    .isActive {
        line-height: 46px;
        border: 2px solid rgba(6, 63, 250, 0.6)
    }
}
</style>

改进版更加还原日历样式，将clip换成mask来实现

<template>
    <div class="mag">
        <!-- <div class="magBox clearfix" :style="`-webkit-clip-path: circle(25% at ${mouseX}px ${mouseY}px);`"> -->
        <div class="magBox clearfix grid-border" :style="`-webkit-mask-position: ${mouseX}px ${mouseY}px;`">
            <div v-for="(item, index) in data" :key="index"></div>
        </div>
        <div class="magBox shadowBox clearfix" @mousemove='touchmoveFn'>
            <div v-for="(item, index) in data" :key="item" @click='activeNum = index' :class="{'isActive': index == activeNum}">{{item}}</div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            mouseX: 0,
            mouseY: 0,
            data: [],
            isActive: [],
            activeNum: null,
            boxX: 0,
            boxY: 0,
            boxWidth: 0,
            boxHeight: 0,
        }
    },
    mounted() {
        // 1.获取盒子对应页面上的位置和宽高
        let box = document.querySelector('.magBox')
        this.boxX = box.offsetLeft
        this.boxY = box.offsetTop
        // 需要待到盒子已经生成后获取宽高要不获取的高度不对
        this.$nextTick(() => {
            this.boxWidth = box.offsetWidth
            this.boxHeight = box.offsetHeight
        })
        // 2.遍历设置日期
        for (let index = 0; index < 30; index++) {
            this.data.push(index + 1)
            this.isActive.push(false)
        }
    },
    methods: {
        // 3.鼠标移动的方法
        touchmoveFn(e) {
            // 当前鼠标位置减去盒子位置即可   由于我们盒子有translate(-50%, -50%)的问题 需要再加上盒子宽高的一半 再减去mask大小一半才是正确的鼠标相对于盒子的位置
            this.mouseX = e.pageX - this.boxX + this.boxWidth / 2 - 120
            this.mouseY = e.pageY - this.boxY + this.boxHeight / 2 - 120
        }
    }
}
</script>
<style lang="scss" scoped>
.mag {
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
}
.grid-border {
  // mask 大小
  -webkit-mask-size: 240px 240px;
  // mask 不重复
  -webkit-mask-repeat: no-repeat;
  // mask 圆半径
  -webkit-mask-image: radial-gradient(circle, #fff, transparent 120px);
  // mask 位置
  -webkit-mask-position: 0px 0px;
}
.magBox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 364px !important;
    padding-bottom: 4px;
    z-index: 1;
    div {
        float: left;
        width: 50px;
        height: 50px;
        text-align: center;
        box-sizing: border-box;
        margin: 4px 0 0 4px;
        line-height: 46px;
        border: 2px solid rgba(0, 0, 0, 0.2);
    }
}
.shadowBox {
    div {
        border: none;
        line-height: 50px;
    }
    div:hover {
        cursor: pointer;
        line-height: 46px;
        outline: 2px solid rgba(6, 63, 250, 0.4);
    }
    .isActive {
        line-height: 46px;
        border: 2px solid rgba(6, 63, 250, 0.6);
        outline: 2px solid rgba(0, 0, 0, 0);
    }
}

</style>

效果图如下：

image.png