Bootstrap: Modal animations for v4 - some examples

Created on 21 Aug 2015 · 7Comments · Source: twbs/bootstrap

I did not believe a pull request was appropriate yet, but I wanted to provide some SCSS additions and some example HTML for easily adding additional animations for modals.

Currently, all animations still require .fade since the JS is looking for fade. I'm proposing this is a starting point to evolve to the final solution.

_modal.scss

.modal {
  &.scale {
    .modal-dialog {
      transition-property: all;
      transform: scale(0.75);
    }

    &.in .modal-dialog {
      transform: scale(1);
    }
  }

  &.from-left {
    .modal-dialog {
      transition-property: all;
      transform: translateX(-100%);
    }

    &.in .modal-dialog {
      transform: translateX(0);
    }
  }

  &.from-right {
    .modal-dialog {
      transition-property: all;
      transform: translateX(100%);
    }

    &.in .modal-dialog {
      transform: translateX(0);
    }
  }

  &.from-bottom {
    .modal-dialog {
      transition-property: all;
      transform: translateY(100%);
    }

    &.in .modal-dialog {
      transform: translateY(0);
    }
  }

  &.from-front {
    .modal-dialog {
      transition-property: all;
      transform: scale(3);
    }

    &.in .modal-dialog {
      transform: scale(1);
    }
  }

  &.newspaper {
    .modal-dialog {
      transition-property: all;
      transform: scale(0) rotate(540deg);
    }

    &.in .modal-dialog {
      transform: scale(1) rotate(0deg);
    }
  }
}

HTML testing

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#md-fade-scale">Modal: fade scale</button>
    <div class="modal fade scale" id="md-fade-scale" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#md-from-right">Modal: from right</button>
    <div class="modal fade from-right" id="md-from-right" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#md-from-left">Modal: from left</button>
    <div class="modal fade from-left" id="md-from-left" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#md-from-bottom">Modal: from bottom</button>
    <div class="modal fade from-bottom" id="md-from-bottom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#md-from-front">Modal: from front</button>
    <div class="modal fade from-front" id="md-from-front" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#md-newspaper">Modal: newspaper</button>
    <div class="modal fade newspaper" id="md-newspaper" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

css feature js v4

Source

durkes

👎2

Most helpful comment

See the Pen Bootstrap Modal Animation With Animate.css by Nunaram Hembram (@max_blue) on CodePen.

nunaram on 8 Aug 2016

👍4

All 7 comments

Please share thoughts on the following proposal - if supported, I will create a pull request for the SCSS and JS:

Modal default behavior (class="modal") will include the fade animation (currently class="modal fade"), so fade is automatic. To disable animation/fade on modal, add something like .no-anim

The additional modal animations can piggy back off of the default behavior and would be indicated like class="modal from-bottom"

Additionally, should we add variables for the transition in and out durations? $modal-transition-in, $modal-transition-out

durkes on 22 Aug 2015

Better yet - instead of animation classes, use data-anim="name"

This will make it easy to universally identify with JS which elements have animation and work with CSS just as well.

durkes on 25 Sep 2015

What is the reason adding modal animations & making bootstrap styles file size larger? At least it should be optional to include animations or not on import.

neilhem on 25 Sep 2015

See first bullet under Modal: https://github.com/twbs/bootstrap/pull/17021
Of course it will be optional on import - at least with Sass build

durkes on 25 Sep 2015

See the Pen Bootstrap Modal Animation With Animate.css by Nunaram Hembram (@max_blue) on CodePen.

nunaram on 8 Aug 2016

👍4

I'm not sure if this is something people want right out of the box with Bootstrap. In my opinion, this adds very little value to the user experience (if any) and adds a lot more code.

The beauty of Bootstrap is that you can build on top of it (if you wish). This feature could be the beginning of going down a slippery slope.