如何为Bootstrap Grid中的列移动设置动画？

Question

我正在制作动态表格。您可以根据需要切换和添加更多表格。切换表单时，它立即显示/消失。我想要动画。当出现一种新形式时，推动其他形式，而在其他形式消失时，所有人都移到自己的位置。

这是我的网格的图片：https://imgur.com/a/pSZr0eQ

您可以看到4张卡。这就是我要制作动画的东西。

我尝试使用CSS过渡属性，但是它仍然与以前一样捕捉。

.move-anim {
   -webkit-transition: all 0.5s ease !important;
   -moz-transition: all 0.5s ease !important;
   -o-transition: all 0.5s ease !important;
   transition: all 0.5s ease !important;
}

我在div上使用的类：     行，col-md-6

Answer 1

.blue {
  background: blue;
  padding: 15px
}

.orange {
  background: orange;
  padding: 15px
}

.red {
  background: red;
  padding: 15px
}

<link href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="col-md-12 blue animated 	fadeInUp">
        <h1>Test1</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet, commodi?</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="col-md-12 orange animated 	fadeInUp">
        <h1>Test2</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet, commodi?</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="col-md-12 red animated 	fadeInUp">
        <h1>Test3</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet, commodi?</p>
      </div>
    </div>
  </div>
</div>

Here我为您树立了一个榜样。

注意：我已经使用过animate.css（here中）了。