CODEWITHSUNDEEP
cssbootstrap-4
Tasmaniaman
Tasmaniaman

Reputation: 23

How do I override the default animation on a bootstrap 4 collapse menu?

I'd like to override the default slide down animation of Bootstrap 4's collapse element.

When you click the button to open a collapsed element I'd like the element to 3d rotate in instead of slide down as per the normal bootstrap 4 transition.

Here's what I've done so far: https://codepen.io/tasmaniaman/pen/LYNMOdy

CSS:

<style>
  .collapse:not(.show),
  .collapse {
      display:block;
      visibility:visible;
  }
  .collapsing {
      -webkit-transition: none;
      transition: none;
    }
  .collapse {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
      -webkit-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
      transform-origin: 50% 0;
      -webkit-transition: 1s transform ease-in;
      -o-transition: 1s transform ease-in;
      transition: 1s transform ease-in;
  }
  .collapse.show {
    -webkit-transform: perspective(400px) rotate3d(0, 0, 0, 0);
    transform: perspective(400px) rotate3d(0, 0, 0, 0);
    -webkit-transition: 1s transform ease-out;
      -o-transition: 1s transform ease-out;
      transition: 1s transform ease-out;
  }
</style>

When you click the button in the codepen example the element quickly appears because I've overridden the default transition on the collapsing class and when you click it again the element correctly 3d rotates out.

I'd like the same 3d rotation when the elements appears. Any help from bootstrap 4 / css gurus would be appreciated.

Upvotes: 1

Views: 1488

Answers (2)

Tasmaniaman
Tasmaniaman

Reputation: 23

Think I've worked it out @ahmad - see codepen: https://codepen.io/tasmaniaman/pen/LYNMOdy

.flip {
  -webkit-transition: .25s transform ease-in-out !important;
  -o-transition: .25s transform ease-in-out !important;
  transition: .25s transform ease-in-out !important;
  display: block !important;
  visibility: visible;
}
.collapse.show {  
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0);
  transform: perspective(400px) rotate3d(1, 0, 0, 0);
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition: .25s transform ease-in-out !important;
  -o-transition: .25s transform ease-in-out !important;
  transition: .25s transform ease-in-out !important;
}
.collapsing {
  height: auto !important;
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
  transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition: .25s transform ease-in-out;
  -o-transition: .25s transform ease-in-out;
  transition: .25s transform ease-in-out; 
}
.collapse:not(.show) {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
  transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition: .25s transform ease-in-out;
  -o-transition: .25s transform ease-in-out;
  transition: .25s transform ease-in-out; 
}

  <div class="container">
    <div class="row">
      <div class="col-12">
        <button class="btn btn-primary rounded-0 shadow-none" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
          Open Sesame
        </button>
        <div class="flip collapse rounded-0" id="collapseExample">
          <div class="card card-body bg-secondary rounded-0">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
          </div>
        </div>
      </div>
    </div>
</div>

Upvotes: 0

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

Here you go, buddy. I fixed it for you. Note that .collapsing is the class that we should change in order to get the same transition on the way back. So I had to override some properties. Using !important and the code won't work without it. Since bootstrap is using javascript to perform the transition.

.collpasing is using hight and transition to make it comes from the top to the bottom and return from bottom to top. Therefore I did override the hight and made it into auto

Also to make the transition happen from the exact place it has to use transform-origin if you remove it from collapsing it will look like a flipped card kinda.

On top of that the transition must be overridden using !important without it you can not apply your custom transition.

lastly based upon your code. You MUST keep the !important used in the following classes.

.collapse:not(.show),
.collapse

without it, it will disappear.

.collapse:not(.show),
.collapse {
  display: block !important;
  visibility: visible;
}

.collapse.show {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
  transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition: 1s transform ease-in;
  -o-transition: 1s transform ease-in;
  transition: 1s transform ease-in;
}

.collapsing {
  height: auto !important;
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0);
  transform: perspective(400px) rotate3d(1, 0, 0, 0);
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition: 1s transform ease-out !important;
  -o-transition: 1s transform ease-out !important;
  transition: 1s transform ease-out !important;
}
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <div class="col-12">
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
          Button with data-target
        </button>
      <div class="collapse" id="collapseExample">
        <div class="card card-body bg-secondary">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        </div>
      </div>
    </div>
  </div>
</div>


<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>

Upvotes: 2

Related Questions