15

I was just debugging modal.js and came across the following piece of code : 

 that.$element.find('.modal-dialog') // wait for modal to slide in
      .one('bsTransitionEnd', function () {
        that.$element.trigger('focus').trigger(e)
      })
      .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
    that.$element.trigger('focus').trigger(e)

my question is about the following line : 

emulateTransitionEnd(Modal.TRANSITION_DURATION) :

What is that? A jQuery function? A custom function in bootstrap?

I googled about this function, but could barely find anything, I am guessing it's a custom bootstrap function. But then I don't see this function in my modal.js (a subset of bootstrap.js) at all .

I saw the following somewhere : link.

What is this emulateTransitionEnd really ? And where is it defined and what is it doing ?

You can find the line I am talking about here : line 99 modal.js

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
Alexander Solonik
  • 9,838
  • 18
  • 76
  • 174
  • 2
    Lost your copy of grep? https://github.com/twbs/bootstrap/blob/ad379ffb4a0fde7416ae076e68141300fc583018/js/transition.js#L36 – cvrebert Feb 27 '15 at 08:27
  • @cvrebert , ok so i have just Jquery and modal.js and i'am making a modal , i don't have transition.js , and my cosnole does't show any errors ! WHYYY ??? – Alexander Solonik Feb 27 '15 at 08:35
  • If you don't load the transitions module, then [`$.support.transition`](https://github.com/twbs/bootstrap/blob/bcf7dd38b5ab180256e2e4fb5da0369551b3f082/js/transition.js#L46) will be undefined, so [transitions will merely be disabled](https://github.com/twbs/bootstrap/blob/442d2dd458c6283c7ecb75c6eb7cb4bcee916eab/js/modal.js#L125) – cvrebert Feb 27 '15 at 08:39
  • so given the following statement `$.support.transition && this.$element.hasClass('fade') ? this.$backdrop .one('bsTransitionEnd', callbackRemove) .emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) : callbackRemove() `. callbackRemove() will fire , if i don't include transitions.js ?? – Alexander Solonik Feb 27 '15 at 08:51

1 Answers1

12

It's a custom Bootstrap function declared here

https://github.com/twbs/bootstrap/blob/83bfff7f0765503b990b96c303eef67009e48d77/js/transition.js#L36

It's a functions that fires event (once) on $.support.transition.end

$.support.transition.end contains one of these events:

  • webkitTransitionEnd
  • transitionend
  • oTransitionEnd
  • otransitionend
  • transitionend

You can find more informations here

how to listen to the end of a bootstrap animation

Community
  • 1
  • 1
Diego Betto
  • 721
  • 6
  • 19