transition-events-js 0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/ChangeLog +12 -0
- data/LICENSE +165 -0
- data/README.md +185 -0
- data/lib/assets/javascripts/transition-events.js +212 -0
- data/lib/transition_events_js.rb +8 -0
- metadata +70 -0
data/ChangeLog
ADDED
@@ -0,0 +1,12 @@
|
|
1
|
+
== 0.2 (Antioch earthquake, 526)
|
2
|
+
* Rename Ruby gem to transition-events-js.
|
3
|
+
* Rename transitionAt to afterTransition.
|
4
|
+
* Rename $.TransitionEvents to $.Transitions.
|
5
|
+
* Don’t execute transitionEnd callback without CSS Transitions support.
|
6
|
+
* Synchronize afterTransition with transitionend event.
|
7
|
+
* Allow to miss durationPart argument in afterTransition.
|
8
|
+
* Add requestAnimationFrame alias.
|
9
|
+
* Remove $.Transitions.cachedProp.
|
10
|
+
|
11
|
+
== 0.1 (Vesuvius eruption, 79 AD)
|
12
|
+
* Initial release.
|
data/LICENSE
ADDED
@@ -0,0 +1,165 @@
|
|
1
|
+
GNU LESSER GENERAL PUBLIC LICENSE
|
2
|
+
Version 3, 29 June 2007
|
3
|
+
|
4
|
+
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
|
5
|
+
Everyone is permitted to copy and distribute verbatim copies
|
6
|
+
of this license document, but changing it is not allowed.
|
7
|
+
|
8
|
+
|
9
|
+
This version of the GNU Lesser General Public License incorporates
|
10
|
+
the terms and conditions of version 3 of the GNU General Public
|
11
|
+
License, supplemented by the additional permissions listed below.
|
12
|
+
|
13
|
+
0. Additional Definitions.
|
14
|
+
|
15
|
+
As used herein, "this License" refers to version 3 of the GNU Lesser
|
16
|
+
General Public License, and the "GNU GPL" refers to version 3 of the GNU
|
17
|
+
General Public License.
|
18
|
+
|
19
|
+
"The Library" refers to a covered work governed by this License,
|
20
|
+
other than an Application or a Combined Work as defined below.
|
21
|
+
|
22
|
+
An "Application" is any work that makes use of an interface provided
|
23
|
+
by the Library, but which is not otherwise based on the Library.
|
24
|
+
Defining a subclass of a class defined by the Library is deemed a mode
|
25
|
+
of using an interface provided by the Library.
|
26
|
+
|
27
|
+
A "Combined Work" is a work produced by combining or linking an
|
28
|
+
Application with the Library. The particular version of the Library
|
29
|
+
with which the Combined Work was made is also called the "Linked
|
30
|
+
Version".
|
31
|
+
|
32
|
+
The "Minimal Corresponding Source" for a Combined Work means the
|
33
|
+
Corresponding Source for the Combined Work, excluding any source code
|
34
|
+
for portions of the Combined Work that, considered in isolation, are
|
35
|
+
based on the Application, and not on the Linked Version.
|
36
|
+
|
37
|
+
The "Corresponding Application Code" for a Combined Work means the
|
38
|
+
object code and/or source code for the Application, including any data
|
39
|
+
and utility programs needed for reproducing the Combined Work from the
|
40
|
+
Application, but excluding the System Libraries of the Combined Work.
|
41
|
+
|
42
|
+
1. Exception to Section 3 of the GNU GPL.
|
43
|
+
|
44
|
+
You may convey a covered work under sections 3 and 4 of this License
|
45
|
+
without being bound by section 3 of the GNU GPL.
|
46
|
+
|
47
|
+
2. Conveying Modified Versions.
|
48
|
+
|
49
|
+
If you modify a copy of the Library, and, in your modifications, a
|
50
|
+
facility refers to a function or data to be supplied by an Application
|
51
|
+
that uses the facility (other than as an argument passed when the
|
52
|
+
facility is invoked), then you may convey a copy of the modified
|
53
|
+
version:
|
54
|
+
|
55
|
+
a) under this License, provided that you make a good faith effort to
|
56
|
+
ensure that, in the event an Application does not supply the
|
57
|
+
function or data, the facility still operates, and performs
|
58
|
+
whatever part of its purpose remains meaningful, or
|
59
|
+
|
60
|
+
b) under the GNU GPL, with none of the additional permissions of
|
61
|
+
this License applicable to that copy.
|
62
|
+
|
63
|
+
3. Object Code Incorporating Material from Library Header Files.
|
64
|
+
|
65
|
+
The object code form of an Application may incorporate material from
|
66
|
+
a header file that is part of the Library. You may convey such object
|
67
|
+
code under terms of your choice, provided that, if the incorporated
|
68
|
+
material is not limited to numerical parameters, data structure
|
69
|
+
layouts and accessors, or small macros, inline functions and templates
|
70
|
+
(ten or fewer lines in length), you do both of the following:
|
71
|
+
|
72
|
+
a) Give prominent notice with each copy of the object code that the
|
73
|
+
Library is used in it and that the Library and its use are
|
74
|
+
covered by this License.
|
75
|
+
|
76
|
+
b) Accompany the object code with a copy of the GNU GPL and this license
|
77
|
+
document.
|
78
|
+
|
79
|
+
4. Combined Works.
|
80
|
+
|
81
|
+
You may convey a Combined Work under terms of your choice that,
|
82
|
+
taken together, effectively do not restrict modification of the
|
83
|
+
portions of the Library contained in the Combined Work and reverse
|
84
|
+
engineering for debugging such modifications, if you also do each of
|
85
|
+
the following:
|
86
|
+
|
87
|
+
a) Give prominent notice with each copy of the Combined Work that
|
88
|
+
the Library is used in it and that the Library and its use are
|
89
|
+
covered by this License.
|
90
|
+
|
91
|
+
b) Accompany the Combined Work with a copy of the GNU GPL and this license
|
92
|
+
document.
|
93
|
+
|
94
|
+
c) For a Combined Work that displays copyright notices during
|
95
|
+
execution, include the copyright notice for the Library among
|
96
|
+
these notices, as well as a reference directing the user to the
|
97
|
+
copies of the GNU GPL and this license document.
|
98
|
+
|
99
|
+
d) Do one of the following:
|
100
|
+
|
101
|
+
0) Convey the Minimal Corresponding Source under the terms of this
|
102
|
+
License, and the Corresponding Application Code in a form
|
103
|
+
suitable for, and under terms that permit, the user to
|
104
|
+
recombine or relink the Application with a modified version of
|
105
|
+
the Linked Version to produce a modified Combined Work, in the
|
106
|
+
manner specified by section 6 of the GNU GPL for conveying
|
107
|
+
Corresponding Source.
|
108
|
+
|
109
|
+
1) Use a suitable shared library mechanism for linking with the
|
110
|
+
Library. A suitable mechanism is one that (a) uses at run time
|
111
|
+
a copy of the Library already present on the user's computer
|
112
|
+
system, and (b) will operate properly with a modified version
|
113
|
+
of the Library that is interface-compatible with the Linked
|
114
|
+
Version.
|
115
|
+
|
116
|
+
e) Provide Installation Information, but only if you would otherwise
|
117
|
+
be required to provide such information under section 6 of the
|
118
|
+
GNU GPL, and only to the extent that such information is
|
119
|
+
necessary to install and execute a modified version of the
|
120
|
+
Combined Work produced by recombining or relinking the
|
121
|
+
Application with a modified version of the Linked Version. (If
|
122
|
+
you use option 4d0, the Installation Information must accompany
|
123
|
+
the Minimal Corresponding Source and Corresponding Application
|
124
|
+
Code. If you use option 4d1, you must provide the Installation
|
125
|
+
Information in the manner specified by section 6 of the GNU GPL
|
126
|
+
for conveying Corresponding Source.)
|
127
|
+
|
128
|
+
5. Combined Libraries.
|
129
|
+
|
130
|
+
You may place library facilities that are a work based on the
|
131
|
+
Library side by side in a single library together with other library
|
132
|
+
facilities that are not Applications and are not covered by this
|
133
|
+
License, and convey such a combined library under terms of your
|
134
|
+
choice, if you do both of the following:
|
135
|
+
|
136
|
+
a) Accompany the combined library with a copy of the same work based
|
137
|
+
on the Library, uncombined with any other library facilities,
|
138
|
+
conveyed under the terms of this License.
|
139
|
+
|
140
|
+
b) Give prominent notice with the combined library that part of it
|
141
|
+
is a work based on the Library, and explaining where to find the
|
142
|
+
accompanying uncombined form of the same work.
|
143
|
+
|
144
|
+
6. Revised Versions of the GNU Lesser General Public License.
|
145
|
+
|
146
|
+
The Free Software Foundation may publish revised and/or new versions
|
147
|
+
of the GNU Lesser General Public License from time to time. Such new
|
148
|
+
versions will be similar in spirit to the present version, but may
|
149
|
+
differ in detail to address new problems or concerns.
|
150
|
+
|
151
|
+
Each version is given a distinguishing version number. If the
|
152
|
+
Library as you received it specifies that a certain numbered version
|
153
|
+
of the GNU Lesser General Public License "or any later version"
|
154
|
+
applies to it, you have the option of following the terms and
|
155
|
+
conditions either of that published version or of any later version
|
156
|
+
published by the Free Software Foundation. If the Library as you
|
157
|
+
received it does not specify a version number of the GNU Lesser
|
158
|
+
General Public License, you may choose any version of the GNU Lesser
|
159
|
+
General Public License ever published by the Free Software Foundation.
|
160
|
+
|
161
|
+
If the Library as you received it specifies that a proxy can decide
|
162
|
+
whether future versions of the GNU Lesser General Public License shall
|
163
|
+
apply, that proxy's public statement of acceptance of any version is
|
164
|
+
permanent authorization for you to choose that version for the
|
165
|
+
Library.
|
data/README.md
ADDED
@@ -0,0 +1,185 @@
|
|
1
|
+
# jQuery Transition Events Plugin
|
2
|
+
|
3
|
+
CSS Transition allows to write simple animation directly in CSS. It’s simpler,
|
4
|
+
faster and cleaner, that JavaScript animation by `jQuery.fn.animate`.
|
5
|
+
But sometimes we need good old complete callback in JavaScript for
|
6
|
+
CSS Transitions animation.
|
7
|
+
|
8
|
+
This jQuery plugin allows to set listeners to [CSS Transitions] animation end or
|
9
|
+
specific part. Plugin requires jQuery 1.8 or higher.
|
10
|
+
|
11
|
+
Method `$.fn.transitionEnd` adds listener for all `transitionend` future events.
|
12
|
+
Method `$.fn.afterTransition` executes callback only once, after transition end.
|
13
|
+
|
14
|
+
CSS with transitions:
|
15
|
+
```css
|
16
|
+
.slider {
|
17
|
+
transition: left 600ms;
|
18
|
+
}
|
19
|
+
.slider.video-position {
|
20
|
+
left: -100px;
|
21
|
+
}
|
22
|
+
```
|
23
|
+
|
24
|
+
Execute callback after current transition end:
|
25
|
+
```js
|
26
|
+
$('.show-video').click(function () {
|
27
|
+
$('.slider').addClass('video-position').afterTransition(function () {
|
28
|
+
autoPlayVideo();
|
29
|
+
});
|
30
|
+
});
|
31
|
+
```
|
32
|
+
|
33
|
+
Sponsored by [Evil Martians].
|
34
|
+
|
35
|
+
[CSS Transitions]: https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions
|
36
|
+
[Evil Martians]: http://evilmartians.com/
|
37
|
+
|
38
|
+
## $.fn.afterTransition
|
39
|
+
|
40
|
+
Plugin has `$.fn.afterTransition` function to execute callback after transition
|
41
|
+
end `delay + (durationPart * duration)`. If browser doesn’t support
|
42
|
+
CSS Transitions, callbacks will be called immediately (because there will be no animation).
|
43
|
+
|
44
|
+
Callback often will be synchronized with `transitionend` by
|
45
|
+
`requestAnimationFrame` hack.
|
46
|
+
|
47
|
+
This function doesn’t check, that transition is really finished (it can be
|
48
|
+
canceled in the middle).
|
49
|
+
|
50
|
+
If can set `durationPart` and run callback in the middle of current transition:
|
51
|
+
|
52
|
+
```js
|
53
|
+
$('.fliper').addClass('rotate').afterTransition(0.5, function () {
|
54
|
+
$(this).find('.backface').show();
|
55
|
+
});
|
56
|
+
```
|
57
|
+
|
58
|
+
If transition is set for several properties, `$.fn.afterTransition` will execute
|
59
|
+
callback on every property. For example:
|
60
|
+
|
61
|
+
```css
|
62
|
+
.car {
|
63
|
+
transition-property: top, left;
|
64
|
+
transition-duration: 1s, 4s;
|
65
|
+
transition-delay: 1s;
|
66
|
+
}
|
67
|
+
```
|
68
|
+
|
69
|
+
```js
|
70
|
+
$('.car').addClass('at-home').afterTransition(function (e) {
|
71
|
+
console.log(e.propertyName + ' ' + e.elapsedTime);
|
72
|
+
});
|
73
|
+
```
|
74
|
+
|
75
|
+
This code will print `"top 1"` and `"left 4"`.
|
76
|
+
|
77
|
+
## $.fn.transitionEnd
|
78
|
+
|
79
|
+
Modern browsers have `transitionend` event. This plugin hides vendor prefix
|
80
|
+
problem from you.
|
81
|
+
|
82
|
+
```js
|
83
|
+
// Bind synchronized listener to end of all future transitions.
|
84
|
+
$('.slider').transitionEnd(function () {
|
85
|
+
if ( $('.slider').hasClass('video-position') ) {
|
86
|
+
autoPlayVideo();
|
87
|
+
}
|
88
|
+
});
|
89
|
+
$('.show-video').click(function () {
|
90
|
+
slider.addClass('video-position');
|
91
|
+
});
|
92
|
+
$('.hide-video').click(function () {
|
93
|
+
// It will execute transitionEnd too
|
94
|
+
slider.removeClass('video-position');
|
95
|
+
});
|
96
|
+
```
|
97
|
+
|
98
|
+
Main difference with `$.fn.afterTransition` is that this method adds callback
|
99
|
+
for all future transitions, not just for current one. Also callback willn’t
|
100
|
+
execute without CSS Transitions support.
|
101
|
+
|
102
|
+
If transition is set for several properties, `$.fn.transitionEnd` will execute
|
103
|
+
callback on every property.
|
104
|
+
|
105
|
+
If transition is canceled before finishing `$.fn.transitionEnd` won’t execute
|
106
|
+
callback (for example, you add transition to hover, and object looses hover in the
|
107
|
+
middle of animation).
|
108
|
+
|
109
|
+
## Event object
|
110
|
+
|
111
|
+
Callbacks get object with properties:
|
112
|
+
* `type` – event name: `transitionend` (be often with vendor prefix) or
|
113
|
+
`aftertransition`.
|
114
|
+
* `currentTarget` – DOM node with CSS transition.
|
115
|
+
* `propertyName` – CSS property name, which has transition. it will be empty,
|
116
|
+
if CSS Transitions aren’t supported.
|
117
|
+
* `elapsedTime` – number of seconds the transition had been running at the time
|
118
|
+
the event fired. This value isn't affected by the value of `transition-delay`.
|
119
|
+
It will be zero, if CSS Transitions isn’t supported.
|
120
|
+
|
121
|
+
## Extra
|
122
|
+
|
123
|
+
Free additional present from plugin: you can check CSS Transitions support:
|
124
|
+
|
125
|
+
```js
|
126
|
+
if ( $.Transitions.isSupported() ) {
|
127
|
+
// CSS Transitions is supported
|
128
|
+
}
|
129
|
+
```
|
130
|
+
|
131
|
+
Also you can call `requestAnimationFrame` with polyfill and vendor prefixes
|
132
|
+
autodetection:
|
133
|
+
|
134
|
+
```js
|
135
|
+
$.Transitions.animFrame(function () {
|
136
|
+
// Draw something
|
137
|
+
});
|
138
|
+
```
|
139
|
+
|
140
|
+
## Installing
|
141
|
+
|
142
|
+
### Ruby on Rails
|
143
|
+
|
144
|
+
For Ruby on Rails you can use gem for Assets Pipeline.
|
145
|
+
|
146
|
+
1. Add `transition-events-js` gem to `Gemfile`:
|
147
|
+
|
148
|
+
```ruby
|
149
|
+
gem "transition-events-js"
|
150
|
+
```
|
151
|
+
|
152
|
+
2. Install gems:
|
153
|
+
|
154
|
+
```sh
|
155
|
+
bundle install
|
156
|
+
```
|
157
|
+
|
158
|
+
3. Include plugin to your `application.js.coffee`:
|
159
|
+
|
160
|
+
```coffee
|
161
|
+
#= require transition-events
|
162
|
+
```
|
163
|
+
|
164
|
+
### Others
|
165
|
+
|
166
|
+
If you don’t use any assets packaging manager (that’s very bad idea), you can use
|
167
|
+
already minified version of the library.
|
168
|
+
Take it from: [github.com/ai/transition-events/downloads].
|
169
|
+
|
170
|
+
[github.com/ai/transition-events/downloads]: https://github.com/ai/transition-events/downloads
|
171
|
+
|
172
|
+
## Contributing
|
173
|
+
|
174
|
+
Open `test.html` in repository to run intergration tests.
|
175
|
+
|
176
|
+
## License
|
177
|
+
|
178
|
+
Plugin is licensed under the GNU Lesser General Public License version 3.
|
179
|
+
See the LICENSE file or [gnu.org/licenses/lgpl.html].
|
180
|
+
|
181
|
+
[gnu.org/licenses/lgpl.html]: http://gnu.org/licenses/lgpl.html
|
182
|
+
|
183
|
+
## Author
|
184
|
+
|
185
|
+
Andrey “A.I.” Sitnik <andrey@sitnik.ru>
|
@@ -0,0 +1,212 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright 2012 Andrey “A.I.” Sitnik <andrey@sitnik.ru>,
|
3
|
+
* sponsored by Evil Martians.
|
4
|
+
*
|
5
|
+
* This program is free software: you can redistribute it and/or modify
|
6
|
+
* it under the terms of the GNU Lesser General Public License as published by
|
7
|
+
* the Free Software Foundation, either version 3 of the License, or
|
8
|
+
* (at your option) any later version.
|
9
|
+
*
|
10
|
+
* This program is distributed in the hope that it will be useful,
|
11
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
12
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
13
|
+
* GNU Lesser General Public License for more details.
|
14
|
+
*
|
15
|
+
* You should have received a copy of the GNU Lesser General Public License
|
16
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
17
|
+
*/
|
18
|
+
|
19
|
+
;(function($) {
|
20
|
+
"use strict";
|
21
|
+
|
22
|
+
// Common methods and properties for jQuery Transition Events plugin.
|
23
|
+
// Mostly for internal usage, but maybe helpful for some hack stuff:
|
24
|
+
//
|
25
|
+
// if ( $.Transitions.isSupported() ) {
|
26
|
+
// // CSS Transitions is supported
|
27
|
+
// }
|
28
|
+
$.Transitions = {
|
29
|
+
|
30
|
+
// Hash of property name to event name with vendor prefixes.
|
31
|
+
// It is used to detect prefix.
|
32
|
+
_names: {
|
33
|
+
// Webkit must be on bottom, because Opera try to use webkit
|
34
|
+
// prefix.
|
35
|
+
'transition': 'transitionend',
|
36
|
+
'OTransition': 'oTransitionEnd',
|
37
|
+
'WebkitTransition': 'webkitTransitionEnd',
|
38
|
+
'MozTransition': 'transitionend'
|
39
|
+
},
|
40
|
+
|
41
|
+
// Return array of milliseconds for CSS value of `transition-duration`.
|
42
|
+
// It’s used in `$.fn.afterTransition`.
|
43
|
+
_parseTimes: function (string) {
|
44
|
+
var value, array = string.split(/,\s*/);
|
45
|
+
for (var i = 0; i < array.length; i++) {
|
46
|
+
value = array[i];
|
47
|
+
array[i] = parseFloat(value);
|
48
|
+
if ( value.match(/\ds/) ) {
|
49
|
+
array[i] = array[i] * 1000;
|
50
|
+
}
|
51
|
+
}
|
52
|
+
return array;
|
53
|
+
},
|
54
|
+
|
55
|
+
// Autodetect vendor prefix and return `transitionend` event name.
|
56
|
+
//
|
57
|
+
// If browser didn’t support CSS Transitions it will return `false`.
|
58
|
+
getEvent: function () {
|
59
|
+
var finded = false;
|
60
|
+
for ( var prop in this._names ) {
|
61
|
+
if ( typeof(document.body.style[prop]) != 'undefined' ) {
|
62
|
+
finded = this._names[prop];
|
63
|
+
break;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
this.getEvent = function () {
|
68
|
+
return finded;
|
69
|
+
};
|
70
|
+
|
71
|
+
return finded;
|
72
|
+
},
|
73
|
+
|
74
|
+
// Alias to vendor prefixed `requestAnimationFrame`. Will be replace
|
75
|
+
// by native function after first call.
|
76
|
+
animFrame: function (callback) {
|
77
|
+
var raf = window.requestAnimationFrame ||
|
78
|
+
window.webkitRequestAnimationFrame ||
|
79
|
+
window.mozRequestAnimationFrame ||
|
80
|
+
window.msRequestAnimationFrame;
|
81
|
+
if ( raf ) {
|
82
|
+
this.animFrame = function (callback) {
|
83
|
+
return raf.call(window, callback);
|
84
|
+
};
|
85
|
+
} else {
|
86
|
+
this.animFrame = function (callback) {
|
87
|
+
return setTimeout(callback, 10);
|
88
|
+
};
|
89
|
+
}
|
90
|
+
return this.animFrame(callback);
|
91
|
+
},
|
92
|
+
|
93
|
+
// Return `true` if browser support CSS Transitions.
|
94
|
+
isSupported: function () {
|
95
|
+
return this.getEvent() !== false;
|
96
|
+
}
|
97
|
+
|
98
|
+
}
|
99
|
+
|
100
|
+
// jQuery node methods.
|
101
|
+
$.extend($.fn, {
|
102
|
+
|
103
|
+
// Call `callback` after CSS Transition finish
|
104
|
+
// `delay + (durationPart * duration)`. It will call `callback` only
|
105
|
+
// once, in difference from `transitionEnd`.
|
106
|
+
//
|
107
|
+
// $('.show-video').click(function () {
|
108
|
+
// $('.slider').addClass('video-position').afterTransition(
|
109
|
+
// function () { autoPlayVideo(); });
|
110
|
+
// });
|
111
|
+
//
|
112
|
+
// You can set `durationPart` to call `callback` in the middle of
|
113
|
+
// transition:
|
114
|
+
//
|
115
|
+
// $('.fliper').addClass('rotate').afterTransition(0.5, function () {
|
116
|
+
// $(this).find('.backface').show();
|
117
|
+
// });
|
118
|
+
//
|
119
|
+
// Callback will get object with `propertyName` and `elapsedTime`
|
120
|
+
// properties. If transition is set to difference properties, it will
|
121
|
+
// be called on every property.
|
122
|
+
//
|
123
|
+
// This method doesn’t check, that transition is really finished (it can
|
124
|
+
// be canceled in the middle).
|
125
|
+
afterTransition: function (durationPart, callback) {
|
126
|
+
if ( typeof(callback) == 'undefined' ) {
|
127
|
+
callback = durationPart;
|
128
|
+
durationPart = 1;
|
129
|
+
}
|
130
|
+
|
131
|
+
if ( !$.Transitions.isSupported() ) {
|
132
|
+
for (var i = 0; i < this.length; i++) {
|
133
|
+
callback.call(this[i], {
|
134
|
+
type: 'aftertransition',
|
135
|
+
elapsedTime: 0,
|
136
|
+
propertyName: '',
|
137
|
+
currentTarget: this[i],
|
138
|
+
});
|
139
|
+
}
|
140
|
+
return this;
|
141
|
+
}
|
142
|
+
|
143
|
+
for (var i = 0; i < this.length; i++) {
|
144
|
+
var el = $(this[i]);
|
145
|
+
var props = el.css('transition-property').split(/,\s*/);
|
146
|
+
var durations = el.css('transition-duration');
|
147
|
+
var delays = el.css('transition-delay');
|
148
|
+
|
149
|
+
durations = $.Transitions._parseTimes(durations);
|
150
|
+
delays = $.Transitions._parseTimes(delays);
|
151
|
+
|
152
|
+
var prop, duration, delay, after, elapsed;
|
153
|
+
for (var j = 0; j < props.length; j++) {
|
154
|
+
prop = props[j];
|
155
|
+
duration = durations[ durations.length == 1 ? 0 : j ];
|
156
|
+
delay = delays[ delays.length == 1 ? 0 : j ];
|
157
|
+
after = delay + (duration * durationPart);
|
158
|
+
elapsed = duration * durationPart / 1000;
|
159
|
+
|
160
|
+
(function (el, prop, after, elapsed) {
|
161
|
+
setTimeout(function () {
|
162
|
+
$.Transitions.animFrame(function () {
|
163
|
+
callback.call(el[0], {
|
164
|
+
type: 'aftertransition',
|
165
|
+
elapsedTime: elapsed,
|
166
|
+
propertyName: prop,
|
167
|
+
currentTarget: el[0]
|
168
|
+
});
|
169
|
+
});
|
170
|
+
}, after);
|
171
|
+
})(el, prop, after, elapsed);
|
172
|
+
}
|
173
|
+
}
|
174
|
+
return this;
|
175
|
+
},
|
176
|
+
|
177
|
+
// Set `callback` to listen every CSS Transition finish.
|
178
|
+
// It will call `callback` on every finished transition,
|
179
|
+
// in difference from `afterTransition`.
|
180
|
+
//
|
181
|
+
// It just bind to `transitionend` event, but detect vendor prefix.
|
182
|
+
//
|
183
|
+
// Callback will get event object with `propertyName` and `elapsedTime`
|
184
|
+
// properties. If transition is set to difference properties, it will
|
185
|
+
// be called on every property.
|
186
|
+
//
|
187
|
+
// Note, that `callback` will get original event object, not from
|
188
|
+
// jQuery.
|
189
|
+
//
|
190
|
+
// var slider = $('.slider').transitionEnd(function () {
|
191
|
+
// if ( slider.hasClass('video-position') ) {
|
192
|
+
// autoPlayVideo();
|
193
|
+
// }
|
194
|
+
// });
|
195
|
+
//
|
196
|
+
// $('.show-video').click(function () {
|
197
|
+
// slider.addClass('video-position');
|
198
|
+
// });
|
199
|
+
//
|
200
|
+
// If transition will be canceled before finish, event willn’t be fired.
|
201
|
+
transitionEnd: function (callback) {
|
202
|
+
for (var i = 0; i < this.length; i++) {
|
203
|
+
this[i].addEventListener($.Transitions.getEvent(), function (e) {
|
204
|
+
callback.call(this, e);
|
205
|
+
});
|
206
|
+
}
|
207
|
+
return this;
|
208
|
+
}
|
209
|
+
|
210
|
+
});
|
211
|
+
|
212
|
+
}).call(this, jQuery);
|
metadata
ADDED
@@ -0,0 +1,70 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: transition-events-js
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: '0.2'
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Andrey "A.I" Sitnik
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2012-09-07 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: sprockets
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - ! '>='
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: '2'
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ! '>='
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '2'
|
30
|
+
description:
|
31
|
+
email:
|
32
|
+
- andrey@sitnik.ru
|
33
|
+
executables: []
|
34
|
+
extensions: []
|
35
|
+
extra_rdoc_files:
|
36
|
+
- LICENSE
|
37
|
+
- README.md
|
38
|
+
- ChangeLog
|
39
|
+
files:
|
40
|
+
- lib/assets/javascripts/transition-events.js
|
41
|
+
- lib/transition_events_js.rb
|
42
|
+
- LICENSE
|
43
|
+
- README.md
|
44
|
+
- ChangeLog
|
45
|
+
homepage: https://github.com/ai/transition-events
|
46
|
+
licenses: []
|
47
|
+
post_install_message:
|
48
|
+
rdoc_options: []
|
49
|
+
require_paths:
|
50
|
+
- lib
|
51
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
52
|
+
none: false
|
53
|
+
requirements:
|
54
|
+
- - ! '>='
|
55
|
+
- !ruby/object:Gem::Version
|
56
|
+
version: '0'
|
57
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
58
|
+
none: false
|
59
|
+
requirements:
|
60
|
+
- - ! '>='
|
61
|
+
- !ruby/object:Gem::Version
|
62
|
+
version: '0'
|
63
|
+
requirements: []
|
64
|
+
rubyforge_project:
|
65
|
+
rubygems_version: 1.8.23
|
66
|
+
signing_key:
|
67
|
+
specification_version: 3
|
68
|
+
summary: jQuery plugin to set listeners for CSS Transition animation end or specific
|
69
|
+
part.
|
70
|
+
test_files: []
|