flex折叠优化

by Abruzzi Hraig

HTML

<div class="group">
    <div class="item first"><i class="trigger"></i></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

CSS

@-webkit-keyframes fold {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100px);
    }
}

@-webkit-keyframes expand {
    from {
        transform: translateX(-100px);
    }
    to {
        transform: translateX(0);
    }
}

.group {
    display: flex;
    width: 400px;
    position: relative;
}
.item {
    position: relative;
    flex: 1;
    background: red;
    height: 100px;
    border: 1px solid black;
    box-sizing: border-box;
}
.first {
    width: 100px;
    background: blue;
    z-index: 1;
    flex: 0 auto;
}
.move {
    animation: fold 1s both;
}
.back {
    animation: expand 1s both;
}

i {
    position: absolute;
    right: -20px;
    width: 20px;
    height: 20px;
    z-index: 1;
    background: green;
}
.scale {
    width: 0;
}

JavaScript

$(function() {
    var x = true;
    $('.trigger').click(function() {
        if (x) {
            $('.first').addClass('move');
            setTimeout(function() {
                $('.first').removeClass('move').addClass('scale');
            }, 1000);
        } else {
            $('.first').removeClass('scale').addClass('back');
            setTimeout(function() {
                $('.first').removeClass('back');
            }, 1000);
        }
        x = !x;
    });
});