<template>
    <!-- <h4>我是动效滚动</h4> -->
     <div>
        <input type="checkbox" class="honneyBtn" v-model="status" :id="cnt">
        <label for="honneyBtn" class="test"></label>
     </div>

</template>

<script>
export default{
    data(){
        return{
            status: false,
        }
    },
    mounted(){
        // 后端接口获取好友状态
        this.status = this.Status
    },
    props:{
        Status:Boolean,
        cnt:String,
        userId1: Number,
        ReviseStatus2Father: Function
        // Status2:String
    },
    watch:{
        status(newvalue){
            this.status = newvalue
            this.ReviseStatus2Father(this.status)
            // console.log(this.newvalue)
        },
        Status(){
            this.status = this.Status
        }
    }
}
</script>

<style scoped>
:root{
    --honey-width:200px;
    --honey-height:100px;
}
input{
    /* display: none; */
    opacity: 0;
    width: calc(200px * 0.2);
    height: calc(100px * 0.2);
}
label{
    /* 圆角矩形组件 */
    display: block;
    position: relative;
    background-color:#979797;
    width: calc(200px * 0.2);
    height: calc(100px * 0.2);
    border-radius: 200px;
    padding: 0px;
    margin: 0px;
    transition: all 0.37s ease-in;

    position: inherit;
    top: -50%;
    z-index: -1;
}
label::before{
    /* 圆角矩形里面的按钮 */
    content: '';
    position: absolute;
    width: calc(82px * 0.2);
    height: calc(82px * 0.2);
    border-radius: 50%;
    border: calc(2px * 0.2) solid #b0b0b0;
    background-color: white;
    top: calc(7px * 0.2);
    left: calc(5px * 0.2);
    transition: all 1s ease-in;
    animation: reverse_switch 0.35s forwards;
}
.honneyBtn:checked + label{
    background-color: #FE4E96;
}
.honneyBtn:checked + label::before{
    border:calc(2px * 0.2) solid #fc5ea0;
    animation: switch 0.35s forwards;
}

/* 给圆形定义关键帧 */
@keyframes switch {
    0% {
        left: calc(4px * 0.2);
    }
    60% {
        left:calc(4px * 0.2);
        width: calc(112px * 0.2);
    }
    100%{
        left: calc(104px * 0.2);
    }
}
@keyframes reverse_switch {
    0% {
        left: calc(104px * 0.2);

    }
    60%{
        left: calc(74px * 0.2);
        width: calc(112px * 0.2);
    }
    100%{
        left: calc(4px * 0.2);
    }
}


</style>