35 |
35 |
36 |
37 | [CSS Transitions]: https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions
38 |
39 | ## $.fn.afterTransition
40 |
41 | Plugin has `$.fn.afterTransition` function to execute callback after transition
42 | end `delay + (durationPart * duration)`. If browser doesn’t support
43 | CSS Transitions, callbacks will be called immediately (because there will be no animation).
44 |
45 | Callback often will be synchronized with `transitionend` by
46 | `requestAnimationFrame` hack.
47 |
48 | This function doesn’t check, that transition is really finished (it can be
49 | canceled in the middle).
50 |
51 | If can set `durationPart` and run callback in the middle of current transition:
52 |
53 | ```js
54 | $('.fliper').addClass('rotate').afterTransition(0.5, function () {
55 | $(this).find('.backface').show();
56 | });
57 | ```
58 |
59 | If transition is set for several properties, `$.fn.afterTransition` will execute
60 | callback on every property. For example:
61 |
62 | ```css
63 | .car {
64 | transition-property: top, left;
65 | transition-duration: 1s, 4s;
66 | transition-delay: 1s;
67 | }
68 | ```
69 |
70 | ```js
71 | $('.car').addClass('at-home').afterTransition(function (e) {
72 | console.log(e.propertyName + ' ' + e.elapsedTime);
73 | });
74 | ```
75 |
76 | This code will print `"top 1"` and `"left 4"`.
77 |
78 | ## $.fn.transitionEnd
79 |
80 | Modern browsers have `transitionend` event. This plugin hides vendor prefix
81 | problem from you.
82 |
83 | ```js
84 | // Bind synchronized listener to end of all future transitions.
85 | $('.slider').transitionEnd(function () {
86 | if ( $('.slider').hasClass('video-position') ) {
87 | autoPlayVideo();
88 | }
89 | });
90 | $('.show-video').click(function () {
91 | slider.addClass('video-position');
92 | });
93 | $('.hide-video').click(function () {
94 | // It will execute transitionEnd too
95 | slider.removeClass('video-position');
96 | });
97 | ```
98 |
99 | Main difference with `$.fn.afterTransition` is that this method adds callback
100 | for all future transitions, not just for current one. Also callback won’t be
101 | executed without CSS Transitions support.
102 |
103 | If transition is set for several properties, `$.fn.transitionEnd` will execute
104 | callback on every property.
105 |
106 | If transition is canceled before finishing `$.fn.transitionEnd` won’t execute
107 | callback (for example, you add transition to hover, and object looses hover in the
108 | middle of animation).
109 |
110 | ## Event object
111 |
112 | Callbacks get object with properties:
113 | * `type` – event name: `transitionend` (be often with vendor prefix) or
114 | `aftertransition`.
115 | * `currentTarget` – DOM node with CSS transition.
116 | * `propertyName` – CSS property name, which has transition. it will be empty,
117 | if CSS Transitions aren’t supported.
118 | * `elapsedTime` – number of seconds the transition had been running at the time
119 | the event fired. This value isn't affected by the value of `transition-delay`.
120 | It will be zero, if CSS Transitions isn’t supported.
121 |
122 | ## Extra
123 |
124 | Free additional present from plugin: you can check CSS Transitions support:
125 |
126 | ```js
127 | if ( $.Transitions.isSupported() ) {
128 | // CSS Transitions is supported
129 | }
130 | ```
131 |
132 | Also you can call `requestAnimationFrame` with polyfill and vendor prefixes
133 | autodetection:
134 |
135 | ```js
136 | $.Transitions.animFrame(function () {
137 | // Draw something
138 | });
139 | ```
140 |
141 | ## Installing
142 |
143 | ### Ruby on Rails
144 |
145 | For Ruby on Rails you can use gem for Assets Pipeline.
146 |
147 | 1. Add `transition-events-js` gem to `Gemfile`:
148 |
149 | ```ruby
150 | gem "transition-events-js"
151 | ```
152 |
153 | 2. Install gems:
154 |
155 | ```sh
156 | bundle install
157 | ```
158 |
159 | 3. Include plugin to your `application.js.coffee`:
160 |
161 | ```coffee
162 | #= require transition-events
163 | ```
164 |
165 | ### Others
166 |
167 | If you don’t use any assets packaging manager (that’s very bad idea), you can use
168 | already minified version of the library.
169 | Take it from: [github.com/ai/transition-events/downloads].
170 |
171 | [github.com/ai/transition-events/downloads]: https://github.com/ai/transition-events/downloads
172 |
173 | ## Contributing
174 |
175 | Open `test.html` in repository to run intergration tests.
176 |
177 | ## License
178 |
179 | Plugin is licensed under the GNU Lesser General Public License version 3.
180 | See the LICENSE file or [gnu.org/licenses/lgpl.html].
181 |
182 | [gnu.org/licenses/lgpl.html]: http://gnu.org/licenses/lgpl.html
183 |
184 | ## Author
185 |
186 | Andrey “A.I.” Sitnik 71 | Support: . 72 | Event name: . 73 |
74 |