Question

我有一个盒子的flexbox布局。单击这些框时，这些框会展开到全屏。

问题是，当盒子展开时，它会移动其他flex元素，导致动画看起来有些跳跃。弹性布局还使扩展框不会触及屏幕顶部。

这是一个小提示，向您展示我在说什么 fiddle

方框1实际上非常接近所需的效果，但它仍然像我上面描述的那样跳跃。

我尝试将所有未点击的卡片设置为“display：none”;但这并没有解决任何一个问题。我还尝试在扩展卡时将容器更改为“display：block”，而在不扩展时将其更改为flex。但同样，没有运气

HTML

<div id=container>
        <div class=cards> 
            <div class=card> 
                <div class="face front"> 
                    Card 1 Front
                </div> 
                <div class="face back"> 
                    Card 1 Back
                </div> 
            </div> 
        </div> 

        <div class=cards> 
            <div class=card> 
                <div class="face front"> 
                    Card 2 Front
                </div> 
                <div class="face back"> 
                    Card 2 Back
                </div> 
            </div> 
        </div>

        <div class=cards> 
            <div class=card> 
                <div class="face front"> 
                    Card 3 Front
                </div> 
                <div class="face back"> 
                    Card 3 Back
                </div> 
            </div> 
        </div>

        <div class=cards>
            <div class=card> 
                <div class="face front"> 
                    Card 4 Front
                </div> 
                <div class="face back"> 
                    Card 4 Back
                </div> 
            </div> 
        </div>
     </div>

CSS

body {
    height:100vh;
    width:100vw;
    margin:0px;
}

.noDisplay{
    display: none;
}

#container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;

    position: relative;
    background: skyblue;
    height:100%;
    width: 100%;
    overflow: hidden;
    margin:auto;
}

.off {
    color: rgba(0, 0, 0, 0.0) !important;
    background: rgba(230, 230, 250, 0.0) !important;
    -webkit-transition: all 2s; /* Safari */
            transition: all 2s;
}

.cards {
    width: 300px;
    height: 300px;
    border-radius: 5px;
    margin-left: 25px;
    margin-right: 25px;;

    -webkit-perspective: 900px;
       -moz-perspective: 900px;
            perspective: 900px;
    -webkit-transition: all 1s; /* Safari */
            transition: all 1s;

}

.cards .card.flipped {
    -webkit-transform: rotatey(-180deg);
       -moz-transform: rotatey(-180deg);
            transform: rotatey(-180deg);
    height: 100%;
    z-index: 100;
}

.cards .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
-webkit-transition: all 1s; /* Safari */
        transition: all 1s;
}

.cards .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden ;
       -moz-backface-visibility: hidden ;
            backface-visibility: hidden ;
    z-index: 2;
    font-size: 2em;
    font-family: arial, sans-serif;
    text-align: center;
    -webkit-transition: all 0.5s; /* Safari */
            transition: all 0.5s;
}

.cards .card .front {
    position: absolute;
    background: tomato;
    z-index: 1;
}

.cards .card .back {
    -webkit-transform: rotatey(-180deg);
       -moz-transform: rotatey(-180deg);
            transform: rotatey(-180deg);
    background: gold;
}

.cards .card .front,
.cards .card .back{
    cursor: pointer;
}

.big {
    height:100%;
    width:100%;
    top: 0%;
    margin-left: 0%;
    margin-right: 0%;
    z-index:100;
}

的jQuery

$('.card').click(function(){
    if (!$(this).hasClass("flipped")) {
        $( ".face" ).addClass( 'off' );
        $( this ).children( ".face" ).removeClass( 'off' );
        $( this ).parent( ".cards" ).addClass( 'big' );
        $( this ).addClass('flipped');

        /*$('.card').each(function(){
            /*if(!$(this).hasClass('flipped')){
                $(this).addClass('noDisplay');
            }
        });*/
    } else {
        $('.container').css('display', 'flex');
        $( ".face" ).removeClass( 'off' );
        $( ".cards" ).removeClass( 'big' );
        $( this ).removeClass('flipped');

        /*$('.card').each(function(){
            $(this).removeClass('noDisplay');
        });*/
    }
});

Answer 1

我知道一个老问题，但是您可以通过更改同级上的flex属性来实现（单击项目时）。首先，您需要使用flexbox设置它们的大小，然后说您的卡片是：

flex:1 0 33vh;

33vh是视口总高度的三分之一；您需要点击将兄弟姐妹（而不是被点击的兄弟姐妹）更改为：

flex:0.00001;

（对于过渡来说，有些说法比flex：0效果更好）。这会将除单击的卡以外的所有卡设置为0（或视情况而定的宽度）高度，然后单击的卡将展开以填充视口的总高度。如果您添加了隐藏的溢出功能并过渡到卡上，那么您就是黄金。

如何在不移动其他Flex项目的情况下将FlexBox项目扩展为全屏？

1 个答案: