scss 汉堡动画

Posted 2021-05-18

$('.hamburger').click(function(){
    if(!$(this).hasClass('active')){
        $(this).removeClass('dormant');
        $(this).addClass('active');
    }else{
        $(this).removeClass('active');
        $(this).addClass('dormant');
    }
});

<div class="hamburger">
    <div class="line line-1"></div>
    <div class="line line-2"></div>
    <div class="line line-3"></div>
</div>

//-----------------------------------------------//

//Config hamburger
$width: 30px;
$lineHeight: 4px;
$lineSpace: 5px;
$lineColor: #ffffff;

//Calculate other proportions
$top-1: 0;
$top-2: ($lineHeight + $lineSpace);
$top-3: (($lineHeight * 2) + ($lineSpace * 2));
$height: (($lineHeight * 3) + ($lineSpace * 2));

.hamburger {
    position: relative;
    //display: none;
    width: $width;
    height: $height;
    cursor: pointer;
    float: right;
    right: 20px;
}

.line {
    width: $width;
    height: $lineHeight;
    background-color: $lineColor;
    position: absolute;
    &-1 {
        top: $top-1;
    }
    &-2 {
        top: $top-2;
    }
    &-3 {
        top: $top-3;
    }
}

.active {
    .line-1 {
        animation:line-1-animate 0.6s forwards;
        transform: rotate(0deg);
    }
    .line-2 { animation:line-2-animate 0.2s forwards;
    }
    .line-3 { animation:line-3-animate 0.6s forwards;
        transform: rotate(0deg);
    }
}

.dormant {
    .line-1 { animation:line-1-unanimate 0.6s forwards;
        transform: rotate(0deg);
    }
    .line-2 { animation:line-2-unanimate 0.4s forwards;
    }
    .line-3 { animation:line-3-unanimate 0.6s forwards;
        transform: rotate(0deg);
    }
}



@keyframes line-1-animate {
    0% {
        top: $top-1;
        transform: rotate(0deg);
    }
    45% {
        top: $top-2;
        transform: rotate(0deg);
    }
    60% {
        top: $top-2;
        transform: rotate(0deg);
    }
    100% {
        top: $top-2;
        transform: rotate(45deg);
    }
}
@keyframes line-2-animate {
    100% {
        opacity: 0;
    }
}
@keyframes line-3-animate {
    0% {
        top: $top-3;
        transform: rotate(0deg);
    }
    45% {
        top: $top-2;
        transform: rotate(0deg);
    }
    60% {
        top: $top-2;
        transform: rotate(0deg);
    }
    100% {
        top: $top-2;
        transform: rotate(-45deg);
    }
}

@keyframes line-1-unanimate {
    0% {
        top: $top-2;
        transform: rotate(45deg);
    }
    45% {
        top: $top-2;
        transform: rotate(0deg);
    }
    60% {
        top: $top-2;
        transform: rotate(0deg);
    }
    100% {
        top: $top-1;
        transform: rotate(0deg);
    }
}
@keyframes line-2-unanimate {
    0% {
        opacity: 0;
    }
    45% {
        opacity: 0;
    }
    60%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes line-3-unanimate {
    0% {
        top: $top-2;
        transform: rotate(-45deg);
    }
    45% {
        top: $top-2;
        transform: rotate(0deg);
    }
    60% {
        top: $top-2;
        transform: rotate(0deg);
    }
    100% {
        top: $top-3;
        transform: rotate(0deg);
    }
}

//-----------------------------------------------//