时间戳

首页 > 解决方案 > 如何在 Bootstrap Grid 中为列移动设置动画？

bootstrap-4 - 如何在 Bootstrap Grid 中为列移动设置动画？

问题描述

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

这是我的网格图片：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 上使用的类：row, col-md-6

标签： bootstrap-4css-transitions

解决方案

.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不要忘记包括它（从这里）。

推荐阅读