transitionend函数

一.js中的transitionend事件

首先JavaScript有一个transitionend事件，在css完成过渡后触发。

与css3的transition一样，需要加浏览器前缀：webkitTransitionEnd(chrome/safari3.1-6.0)、mozTransitionEnd(Firfox)、oTransitionEnd(opera)/transitionend(IE9+)。

栗子：

1
2
3
4
5
demo.addEventListener('webkitTransitionEnd',function(){

    ...

})

注意：addEventListener（）方法是ie8及以下浏览器不支持。

同时，transition动画是不具有start的事件，只有transitionEnd事件。

但是animation动画有animationend、animationiteration、animationstart三个事件，分别对应动画结束播放触发、动画重复播放触发和动画开始播放触发。

这些事件都是用element.addEventListener('事件',end,false)来捕捉。

animationend和transitionend有一个明显的区别是：animationend会在元素的整个动画执行完毕再触发，而transitionend会每一个样式属性值改变一次状态触发一次，不同的属性值改变会累计触发，

比如下面的例子，webkitAnimationEnd事件只在元素向右移动,然后向左返回之后触发一次,而webkitTransitionEnd事件将在元素向右移动之后触发一次,在元素向左返回之后再触发一次。

栗子

以上为js的总结，接下来继续bootstrape。

二.bootstrape的transition

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
+function ($) {

  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)

  // ============================================================

  function transitionEnd() {

    var el = document.createElement('bootstrap');

    var transEndEventNames = {

      WebkitTransition : 'webkitTransitionEnd',

      MozTransition    : 'transitionend',

      OTransition      : 'oTransitionEnd otransitionend',

      transition       : 'transitionend'

    }//把所有浏览器前缀整合为一个对象

    for (var name in transEndEventNames) {

      if (el.style[name] !== undefined) {

        return { end: transEndEventNames[name] }

      }

    }//for遍历前缀，判断css属性是否存在

    return false // explicit for ie8 (  ._.)，若不存在css属性则返回，此时可添加回调函数

  }

  $.fn.emulateTransitionEnd = function (duration) {

    var called = false;//transitionend时间是否已经触发的标识

    var $el = this

    $(this).one('bsTransitionEnd', function () { called = true })//true为已经触发

    var callback = function () {

 if (!called) (el).trigger($.support.transition.end) }//未触发，强制触发

    setTimeout(callback, duration)//一段时间后检测是否触发，因为有时属性值没有发生改变并不会触发，但是在页面过程中可能后来会执行，确保每次回调都被调用需要使用定时器

    return this

  }

  $(function () {

    $.support.transition = transitionEnd()

    if (!$.support.transition) return

    $.event.special.bsTransitionEnd = {

      bindType: $.support.transition.end,

      delegateType: $.support.transition.end,

      handle: function (e) {

        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)

      }

    }

  })//自定义事件，添加事件回调可以这样element.one('bsTransitionEnd',function(){}).emulateTransitionEnd(1000);

}(jQuery);

以上为原版代码。