如何摆脱jquery故障效应？答案

【问题标题】：How to get rid of jquery glitch effect?如何摆脱jquery故障效应？
【发布时间】：2016-03-15 14:58:46
【问题描述】：

我正在使用 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

【问题讨论】：

看到这个答案：stackoverflow.com/questions/29625037/…
我认为这是因为您正在调整几个严重影响页面布局的值。我认为解决方案可能涉及立即影响技术布局，然后逐渐过渡“可见布局”因素。例如，您可以有一个带有边框的容器，该容器立即获得新的高度，但内容是从一个小状态放大的。请注意，任何多行段落如果也被缩放，最终可能会重新调整多次。
@ChristianBonato 这正是我想要的。我最初尝试使用 flex-grow，但没有成功。谢谢！

标签： jquery html css animation

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用 css 过渡，它们在大多数情况下会更平滑。 transition:all 0.3s ease;我的例子需要一些调整，但它确实成功了 Codepen

【讨论】：