Question

我正在使用jquery动画来增加div的宽度和高度。单击该框时会触发动画，然后在单击出现的后面的字体 - 真棒图标时恢复为原始大小。

HTML：

<body>
<div class="flex-container">
        <div class="flex-items">
    <i class="fa fa-reply fa-2x"></i>1
</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>2</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>3</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>4</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>5</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>6</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>7</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>8</div>
    </div>
</body>

的CSS：

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: lightblue;
}
.flex-container{
    display: flex;
    width: 90vw;
    margin: 0 auto;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: 20px;
}
.flex-items{
    width: 350px;
    height: 350px;
    border: 1px solid black;
    order: 1;
}
i{
    visibility: hidden;
    float: right;
}
.header{
    height: 50px;
    background-color: #333;
}
.headerText{
    margin-left: 40px;
    color: white;
}

jquery：

$(document).ready(function(){
    $(".flex-items").click(function(){
        console.log(this.css);
        $(this)
        .animate({
            width: '100vw',
            height: '100vh'},{
            duration: 300,
            ease: "slow"})  
        .css("order", "0");

        i = $(this).children();
        $(i).css("visibility" ,"initial");
    });
    $("i").click(function(evt){
            evt.stopPropagation();
            $(".flex-items").animate({
            width: '300px',
            height: '300px'},{
            duration: 300,
            ease: "linear"})
            .css("order", "1");
            $(this).css("visibility" ,"hidden");
    });
});

当你关闭div并且它恢复到它的原始状态时会发生'毛刺'类型的效果。无论如何都要让这种过渡更顺畅吗？

Codepen

Answer 1

我们不要忘记，Flexbox也可以使用transform:translate3d([whatever vertical], [whatever horizontal], [set to 0 to make sure we're requiring GPU through "3d"])进行翻译，让您可以访问复杂的flexbox网格，其中一些flex窗格可能是弹性的，因此可以收缩/增长，而其他的可能会在其他flex上下滑动窗格（在z-index的帮助下）。

Answer 2

使用css过渡，它们在大多数情况下更平滑。 transition:all 0.3s ease;我的例子需要一些调整，但它可以解决问题 Codepen

如何摆脱jquery毛刺效应？

2 个答案: