如何在Bootstrap网格中进行动画列运动

Question

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

这是我网格的图片：https：//i.stack.imgur.com/rvtjt.jpg

您可以看到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;
}

我在Divs上使用的类： 行，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>

在这里，我为您做了一个例子。

注意：我使用的animate.css不要忘记包括它(从这里(。