如何摆脱jQuery的小故障效果？

我正在使用jquery动画来增加div的宽度和高度。单击该框时会触发动画，然后在点击出现的背面字体真棒图标时将其恢复为原始大小。如何摆脱jQuery的小故障效果？

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

来源

2016-03-15 Froy

看到这个答案：http://stackoverflow.com/questions/29625037/transition-flex-grow-of-items-in-a-flexbox/36015061#36015061 –

我想这是因为你正在调整几个会严重影响页面布局的值。我认为解决方案可能会立即影响技术布局，然后逐渐过渡“可见布局”因素。例如，你可以有一个边框容器立即获得新的高度，但内容从一个小的状态放大。请注意，任何多行段落最终都可能会多次重新调整，如果它们缩放的话。 – Katana314

@ChristianBonato，这正是我正在寻找的。我最初尝试使用flex-grow，但是我没有成功。谢谢！ – Froy

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

来源

2016-03-15 16:36:34

使用CSS转换他们是平滑的大部分时间。 transition:all 0.3s ease;我的例子，需要一些调整，但它的伎俩 Codepen

来源

2016-03-15 15:12:01 theblackgigant

如何摆脱jQuery的小故障效果？

回答

相关问题