CODEWITHSUNDEEP
bootstrap-4css-transitions
Toni Florea
Toni Florea

Reputation: 43

How to animate column movement in Bootstrap Grid?

I'm making a dynamic form. You can toggle and add more forms according to your needs. When you toggle a form, it appears / disappears instantly. I want a moving animation. When a new form appears, to push the others, and when it disappears, all of them to move to their place.

Here is a picture of my grid: https://i.sstatic.net/RVtjT.jpg

You can see the 4 cards. That's what I'm trying to animate.

I've tried using CSS transition property, however, it still snaps the same way as before.

.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;
}

The classes that I've used on the divs: row, col-md-6

Upvotes: 0

Views: 2149

Answers (1)

Maarten de Wolf
Maarten de Wolf

Reputation: 182

.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 I made a example for you.

Note: I have used animate.css do not forget to include it (from here).

Upvotes: 1

Related Questions