小编Tim*_*Tim的帖子

我有一些可排序的CSS3关键帧动画通过类定义.排序时,我注意到这个小提琴中的奇怪行为.

.slideLeft {
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;    

  animation-duration: 1s;   
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out;   
  -webkit-animation-timing-function: ease-in-out;       

  visibility: visible !important;   
}

@keyframes slideLeft {
  0% {
     transform: translateX(150%);
  }
  50%{
    transform: translateX(-8%);
  }
  65%{
    transform: translateX(4%);
  }
  80%{
    transform: translateX(-4%);
  }
  95%{
    transform: translateX(2%);
  }         
  100% {
    transform: translateX(0%);
  }
}

启动jQuery可排序.

$(function() {
  $( "#sortable" ).sortable();
});

动画触发的排序start和stop,而动画类没有被重新应用.似乎有一些由jQuery修改DOM引起的重排.但它如何继续触发动画,是否可以避免？目标是在排序时根本没有动画,同时保持课程.

答:这是有道理的,因为我们拖动的项目只是一个克隆,它会动画,start因为我们将克隆插入到DOM中.发生的动画stop具有相同的原因,因为克隆随后被附加到它的新位置,再次触发文档的重排.

我想知道是否可以将柔性物品水平对齐到同一容器中较大的柔性物品.使用CSS浮动它很容易实现,但我无法使用flex项目完成它.

查看此JSFiddle以获取Flexbox示例.

查看此JSFiddle是一个浮动示例

网格布局

<div class="flex-container">
 <div class="large-flex-item">
</div>
<div class="small-flex-item">
 </div>
<div class="small-flex-item">
 </div>
</div>

CSS

 .flex-container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-start;
   max-width: 500px;
   margin-right: auto;
   margin-left: auto;
 }

 .small-flex-item {
   flex-basis: 33.333%;
   background: #000;
   padding-top: 30%;
 }

 .large-flex-item {
   flex-basis: 66.667%;
   background: #333;
   padding-top: 60%;
 }