├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── dist
    ├── transition.css
    └── transition.js
├── example
    ├── index.html
    ├── main.js
    └── webpack.config.js
├── index.js
├── package.json
├── transitions.jade
└── transitions.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | example/build
4 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .idea
2 | example
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 vueui
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | vueui-transitions ```v0.1.0```
 2 | ================================
 3 | 
 4 | Use Semantic-UI transitions as v-transition in Vue.js
 5 | 
 6 | ### Installation
 7 | ```bash
 8 | npm install --save vueui-transitions
 9 | ```
10 | 
11 | ### Usage
12 | ```js
13 | var Vue = require('vue');
14 | var transitions = require('vueui-transitions');
15 | 
16 | Vue.use(transitions, {
17 |     duration: 700 // The duration of each animation, Default is 700ms
18 | })
19 | ```
20 | 
21 | In your HTML you can use them like:
22 | ```html
23 | <div class="page" v-show="isVisible" v-transition="slide-up">
24 |     <h1>Welcome to the home page</h1>
25 | </div>
26 | ```
27 | 
28 | ### Animations
29 | 
30 | This is the full list of all the available in-out animations:
31 | ```
32 | var emphasis = [
33 |     'flash',
34 |     'shake',
35 |     'pulse',
36 |     'tada',
37 |     'bounce'
38 | ]
39 | 
40 | var appearance = [
41 |     'slide-up',
42 |     'slide-down',
43 |     'vertical-flip',
44 |     'horizontal-flip',
45 |     'fade',
46 |     'fade-up',
47 |     'fade-down',
48 |     'scale',
49 |     'drop',
50 |     'browse'
51 | ]
52 | ```
53 | 
54 | See the [example](/example) for a full example with more animations and Webpack as the build tool.


--------------------------------------------------------------------------------
/dist/transition.css:
--------------------------------------------------------------------------------
  1 |  /*
  2 |  * # Semantic UI
  3 |  * https://github.com/Semantic-Org/Semantic-UI
  4 |  * http://www.semantic-ui.com/
  5 |  *
  6 |  * Copyright 2014 Contributors
  7 |  * Released under the MIT license
  8 |  * http://opensource.org/licenses/MIT
  9 |  *
 10 |  */
 11 | 
 12 | 
 13 | 
 14 | /*******************************
 15 |           Transitions
 16 | *******************************/
 17 | 
 18 | /*
 19 |   Some transitions adapted from Animate CSS
 20 |   https://github.com/daneden/animate.css
 21 | */
 22 | .transition {
 23 |   -webkit-animation-iteration-count: 1;
 24 |           animation-iteration-count: 1;
 25 |   -webkit-animation-duration: 500ms;
 26 |           animation-duration: 500ms;
 27 |   -webkit-animation-timing-function: ease;
 28 |           animation-timing-function: ease;
 29 |   -webkit-animation-fill-mode: both;
 30 |           animation-fill-mode: both;
 31 | }
 32 | 
 33 | 
 34 | /*******************************
 35 |             States
 36 | *******************************/
 37 | 
 38 | 
 39 | /* Animating */
 40 | .animating.transition {
 41 |   -webkit-backface-visibility: hidden;
 42 |           backface-visibility: hidden;
 43 |   -webkit-transform: translateZ(0);
 44 |           transform: translateZ(0);
 45 |   visibility: visible !important;
 46 | }
 47 | 
 48 | /* Loading */
 49 | .loading.transition {
 50 |   position: absolute;
 51 |   top: -99999px;
 52 |   left: -99999px;
 53 | }
 54 | 
 55 | /* Hidden */
 56 | .hidden.transition {
 57 |   display: none;
 58 |   visibility: hidden;
 59 | }
 60 | 
 61 | /* Visible */
 62 | .visible.transition {
 63 |   display: block !important;
 64 |   visibility: visible !important;
 65 |   -webkit-backface-visibility: hidden;
 66 |           backface-visibility: hidden;
 67 |   -webkit-transform: translateZ(0);
 68 |           transform: translateZ(0);
 69 | }
 70 | 
 71 | /* Disabled */
 72 | .disabled.transition {
 73 |   -webkit-animation-play-state: paused;
 74 |           animation-play-state: paused;
 75 | }
 76 | 
 77 | 
 78 | /*******************************
 79 |           Variations
 80 | *******************************/
 81 | 
 82 | .looping.transition {
 83 |   -webkit-animation-iteration-count: infinite;
 84 |           animation-iteration-count: infinite;
 85 | }
 86 | 
 87 | 
 88 | /*******************************
 89 |              Types
 90 | *******************************/
 91 | 
 92 | 
 93 | 
 94 | /*******************************
 95 |            Animations
 96 | *******************************/
 97 | 
 98 | 
 99 | /*--------------
100 |     Emphasis
101 | ---------------*/
102 | 
103 | .flash.transition {
104 |   -webkit-animation-name: flash;
105 |           animation-name: flash;
106 | }
107 | .shake.transition {
108 |   -webkit-animation-name: shake;
109 |           animation-name: shake;
110 | }
111 | .bounce.transition {
112 |   -webkit-animation-name: bounce;
113 |           animation-name: bounce;
114 | }
115 | .tada.transition {
116 |   -webkit-animation-name: tada;
117 |           animation-name: tada;
118 | }
119 | 
120 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
121 | .pulse.transition {
122 |   -webkit-animation-name: pulse;
123 |           animation-name: pulse;
124 | }
125 | 
126 | /* Flash */
127 | @-webkit-keyframes flash {
128 |   0%,
129 |   50%,
130 |   100% {
131 |     opacity: 1;
132 |   }
133 |   25%,
134 |   75% {
135 |     opacity: 0;
136 |   }
137 | }
138 | @keyframes flash {
139 |   0%,
140 |   50%,
141 |   100% {
142 |     opacity: 1;
143 |   }
144 |   25%,
145 |   75% {
146 |     opacity: 0;
147 |   }
148 | }
149 | 
150 | /* Shake */
151 | @-webkit-keyframes shake {
152 |   0%,
153 |   100% {
154 |     -webkit-transform: translateX(0);
155 |             transform: translateX(0);
156 |   }
157 |   10%,
158 |   30%,
159 |   50%,
160 |   70%,
161 |   90% {
162 |     -webkit-transform: translateX(-10px);
163 |             transform: translateX(-10px);
164 |   }
165 |   20%,
166 |   40%,
167 |   60%,
168 |   80% {
169 |     -webkit-transform: translateX(10px);
170 |             transform: translateX(10px);
171 |   }
172 | }
173 | @keyframes shake {
174 |   0%,
175 |   100% {
176 |     -webkit-transform: translateX(0);
177 |             transform: translateX(0);
178 |   }
179 |   10%,
180 |   30%,
181 |   50%,
182 |   70%,
183 |   90% {
184 |     -webkit-transform: translateX(-10px);
185 |             transform: translateX(-10px);
186 |   }
187 |   20%,
188 |   40%,
189 |   60%,
190 |   80% {
191 |     -webkit-transform: translateX(10px);
192 |             transform: translateX(10px);
193 |   }
194 | }
195 | 
196 | /* Bounce */
197 | @-webkit-keyframes bounce {
198 |   0%,
199 |   20%,
200 |   50%,
201 |   80%,
202 |   100% {
203 |     -webkit-transform: translateY(0);
204 |             transform: translateY(0);
205 |   }
206 |   40% {
207 |     -webkit-transform: translateY(-30px);
208 |             transform: translateY(-30px);
209 |   }
210 |   60% {
211 |     -webkit-transform: translateY(-15px);
212 |             transform: translateY(-15px);
213 |   }
214 | }
215 | @keyframes bounce {
216 |   0%,
217 |   20%,
218 |   50%,
219 |   80%,
220 |   100% {
221 |     -webkit-transform: translateY(0);
222 |             transform: translateY(0);
223 |   }
224 |   40% {
225 |     -webkit-transform: translateY(-30px);
226 |             transform: translateY(-30px);
227 |   }
228 |   60% {
229 |     -webkit-transform: translateY(-15px);
230 |             transform: translateY(-15px);
231 |   }
232 | }
233 | 
234 | /* Tada */
235 | @-webkit-keyframes tada {
236 |   0% {
237 |     -webkit-transform: scale(1);
238 |             transform: scale(1);
239 |   }
240 |   10%,
241 |   20% {
242 |     -webkit-transform: scale(0.9) rotate(-3deg);
243 |             transform: scale(0.9) rotate(-3deg);
244 |   }
245 |   30%,
246 |   50%,
247 |   70%,
248 |   90% {
249 |     -webkit-transform: scale(1.1) rotate(3deg);
250 |             transform: scale(1.1) rotate(3deg);
251 |   }
252 |   40%,
253 |   60%,
254 |   80% {
255 |     -webkit-transform: scale(1.1) rotate(-3deg);
256 |             transform: scale(1.1) rotate(-3deg);
257 |   }
258 |   100% {
259 |     -webkit-transform: scale(1) rotate(0);
260 |             transform: scale(1) rotate(0);
261 |   }
262 | }
263 | @keyframes tada {
264 |   0% {
265 |     -webkit-transform: scale(1);
266 |             transform: scale(1);
267 |   }
268 |   10%,
269 |   20% {
270 |     -webkit-transform: scale(0.9) rotate(-3deg);
271 |             transform: scale(0.9) rotate(-3deg);
272 |   }
273 |   30%,
274 |   50%,
275 |   70%,
276 |   90% {
277 |     -webkit-transform: scale(1.1) rotate(3deg);
278 |             transform: scale(1.1) rotate(3deg);
279 |   }
280 |   40%,
281 |   60%,
282 |   80% {
283 |     -webkit-transform: scale(1.1) rotate(-3deg);
284 |             transform: scale(1.1) rotate(-3deg);
285 |   }
286 |   100% {
287 |     -webkit-transform: scale(1) rotate(0);
288 |             transform: scale(1) rotate(0);
289 |   }
290 | }
291 | 
292 | /* Pulse */
293 | @-webkit-keyframes pulse {
294 |   0% {
295 |     -webkit-transform: scale(1);
296 |             transform: scale(1);
297 |     opacity: 1;
298 |   }
299 |   50% {
300 |     -webkit-transform: scale(0.9);
301 |             transform: scale(0.9);
302 |     opacity: 0.7;
303 |   }
304 |   100% {
305 |     -webkit-transform: scale(1);
306 |             transform: scale(1);
307 |     opacity: 1;
308 |   }
309 | }
310 | @keyframes pulse {
311 |   0% {
312 |     -webkit-transform: scale(1);
313 |             transform: scale(1);
314 |     opacity: 1;
315 |   }
316 |   50% {
317 |     -webkit-transform: scale(0.9);
318 |             transform: scale(0.9);
319 |     opacity: 0.7;
320 |   }
321 |   100% {
322 |     -webkit-transform: scale(1);
323 |             transform: scale(1);
324 |     opacity: 1;
325 |   }
326 | }
327 | 
328 | /*--------------
329 |      Slide
330 | ---------------*/
331 | 
332 | .slide.down.transition.in {
333 |   -webkit-animation-name: slideIn;
334 |           animation-name: slideIn;
335 |   transform-origin: 50% 0%;
336 |   -ms-transform-origin: 50% 0%;
337 |   -webkit-transform-origin: 50% 0%;
338 | }
339 | .slide.down.transition.out {
340 |   -webkit-animation-name: slideOut;
341 |           animation-name: slideOut;
342 |   -webkit-transform-origin: 50% 0%;
343 |       -ms-transform-origin: 50% 0%;
344 |           transform-origin: 50% 0%;
345 | }
346 | .slide.up.transition.in {
347 |   -webkit-animation-name: slideIn;
348 |           animation-name: slideIn;
349 |   -webkit-transform-origin: 50% 100%;
350 |       -ms-transform-origin: 50% 100%;
351 |           transform-origin: 50% 100%;
352 | }
353 | .slide.up.transition.out {
354 |   -webkit-animation-name: slideOut;
355 |           animation-name: slideOut;
356 |   -webkit-transform-origin: 50% 100%;
357 |       -ms-transform-origin: 50% 100%;
358 |           transform-origin: 50% 100%;
359 | }
360 | @-webkit-keyframes slideIn {
361 |   0% {
362 |     opacity: 0;
363 |     -webkit-transform: scaleY(0);
364 |             transform: scaleY(0);
365 |   }
366 |   100% {
367 |     opacity: 1;
368 |     -webkit-transform: scaleY(1);
369 |             transform: scaleY(1);
370 |   }
371 | }
372 | @keyframes slideIn {
373 |   0% {
374 |     opacity: 0;
375 |     -webkit-transform: scaleY(0);
376 |             transform: scaleY(0);
377 |   }
378 |   100% {
379 |     opacity: 1;
380 |     -webkit-transform: scaleY(1);
381 |             transform: scaleY(1);
382 |   }
383 | }
384 | @-webkit-keyframes slideOut {
385 |   0% {
386 |     opacity: 1;
387 |     -webkit-transform: scaleY(1);
388 |             transform: scaleY(1);
389 |   }
390 |   100% {
391 |     opacity: 0;
392 |     -webkit-transform: scaleY(0);
393 |             transform: scaleY(0);
394 |   }
395 | }
396 | @keyframes slideOut {
397 |   0% {
398 |     opacity: 1;
399 |     -webkit-transform: scaleY(1);
400 |             transform: scaleY(1);
401 |   }
402 |   100% {
403 |     opacity: 0;
404 |     -webkit-transform: scaleY(0);
405 |             transform: scaleY(0);
406 |   }
407 | }
408 | 
409 | /*--------------
410 |      Flips
411 | ---------------*/
412 | 
413 | .flip.transition.in,
414 | .flip.transition.out {
415 |   -webkit-perspective: 2000px;
416 |           perspective: 2000px;
417 | }
418 | .horizontal.flip.transition.in {
419 |   -webkit-animation-name: horizontalFlipIn;
420 |           animation-name: horizontalFlipIn;
421 | }
422 | .horizontal.flip.transition.out {
423 |   -webkit-animation-name: horizontalFlipOut;
424 |           animation-name: horizontalFlipOut;
425 | }
426 | .vertical.flip.transition.in {
427 |   -webkit-animation-name: verticalFlipIn;
428 |           animation-name: verticalFlipIn;
429 | }
430 | .vertical.flip.transition.out {
431 |   -webkit-animation-name: verticalFlipOut;
432 |           animation-name: verticalFlipOut;
433 | }
434 | 
435 | /* Horizontal */
436 | @-webkit-keyframes horizontalFlipIn {
437 |   0% {
438 |     -webkit-transform: rotateY(-90deg);
439 |             transform: rotateY(-90deg);
440 |     opacity: 0;
441 |   }
442 |   100% {
443 |     -webkit-transform: rotateY(0deg);
444 |             transform: rotateY(0deg);
445 |     opacity: 1;
446 |   }
447 | }
448 | @keyframes horizontalFlipIn {
449 |   0% {
450 |     -webkit-transform: rotateY(-90deg);
451 |             transform: rotateY(-90deg);
452 |     opacity: 0;
453 |   }
454 |   100% {
455 |     -webkit-transform: rotateY(0deg);
456 |             transform: rotateY(0deg);
457 |     opacity: 1;
458 |   }
459 | }
460 | 
461 | /* Horizontal */
462 | @-webkit-keyframes horizontalFlipOut {
463 |   0% {
464 |     -webkit-transform: rotateY(0deg);
465 |             transform: rotateY(0deg);
466 |     opacity: 1;
467 |   }
468 |   100% {
469 |     -webkit-transform: rotateY(90deg);
470 |             transform: rotateY(90deg);
471 |     opacity: 0;
472 |   }
473 | }
474 | @keyframes horizontalFlipOut {
475 |   0% {
476 |     -webkit-transform: rotateY(0deg);
477 |             transform: rotateY(0deg);
478 |     opacity: 1;
479 |   }
480 |   100% {
481 |     -webkit-transform: rotateY(90deg);
482 |             transform: rotateY(90deg);
483 |     opacity: 0;
484 |   }
485 | }
486 | 
487 | /* Vertical */
488 | @-webkit-keyframes verticalFlipIn {
489 |   0% {
490 |     -webkit-transform: rotateX(-90deg);
491 |             transform: rotateX(-90deg);
492 |     opacity: 0;
493 |   }
494 |   100% {
495 |     -webkit-transform: rotateX(0deg);
496 |             transform: rotateX(0deg);
497 |     opacity: 1;
498 |   }
499 | }
500 | @keyframes verticalFlipIn {
501 |   0% {
502 |     -webkit-transform: rotateX(-90deg);
503 |             transform: rotateX(-90deg);
504 |     opacity: 0;
505 |   }
506 |   100% {
507 |     -webkit-transform: rotateX(0deg);
508 |             transform: rotateX(0deg);
509 |     opacity: 1;
510 |   }
511 | }
512 | @-webkit-keyframes verticalFlipOut {
513 |   0% {
514 |     -webkit-transform: rotateX(0deg);
515 |             transform: rotateX(0deg);
516 |     opacity: 1;
517 |   }
518 |   100% {
519 |     -webkit-transform: rotateX(-90deg);
520 |             transform: rotateX(-90deg);
521 |     opacity: 0;
522 |   }
523 | }
524 | @keyframes verticalFlipOut {
525 |   0% {
526 |     -webkit-transform: rotateX(0deg);
527 |             transform: rotateX(0deg);
528 |     opacity: 1;
529 |   }
530 |   100% {
531 |     -webkit-transform: rotateX(-90deg);
532 |             transform: rotateX(-90deg);
533 |     opacity: 0;
534 |   }
535 | }
536 | 
537 | /*--------------
538 |       Fades
539 | ---------------*/
540 | 
541 | .fade.transition.in {
542 |   -webkit-animation-name: fadeIn;
543 |           animation-name: fadeIn;
544 | }
545 | .fade.transition.out {
546 |   -webkit-animation-name: fadeOut;
547 |           animation-name: fadeOut;
548 | }
549 | .fade.up.transition.in {
550 |   -webkit-animation-name: fadeUpIn;
551 |           animation-name: fadeUpIn;
552 | }
553 | .fade.up.transition.out {
554 |   -webkit-animation-name: fadeUpOut;
555 |           animation-name: fadeUpOut;
556 | }
557 | .fade.down.transition.in {
558 |   -webkit-animation-name: fadeDownIn;
559 |           animation-name: fadeDownIn;
560 | }
561 | .fade.down.transition.out {
562 |   -webkit-animation-name: fadeDownOut;
563 |           animation-name: fadeDownOut;
564 | }
565 | 
566 | /* Fade */
567 | @-webkit-keyframes fadeIn {
568 |   0% {
569 |     opacity: 0;
570 |   }
571 |   100% {
572 |     opacity: 1;
573 |   }
574 | }
575 | @keyframes fadeIn {
576 |   0% {
577 |     opacity: 0;
578 |   }
579 |   100% {
580 |     opacity: 1;
581 |   }
582 | }
583 | @-webkit-keyframes fadeOut {
584 |   0% {
585 |     opacity: 1;
586 |   }
587 |   100% {
588 |     opacity: 0;
589 |   }
590 | }
591 | @keyframes fadeOut {
592 |   0% {
593 |     opacity: 1;
594 |   }
595 |   100% {
596 |     opacity: 0;
597 |   }
598 | }
599 | 
600 | /* Fade Up */
601 | @-webkit-keyframes fadeUpIn {
602 |   0% {
603 |     opacity: 0;
604 |     -webkit-transform: translateY(10%);
605 |             transform: translateY(10%);
606 |   }
607 |   100% {
608 |     opacity: 1;
609 |     -webkit-transform: translateY(0%);
610 |             transform: translateY(0%);
611 |   }
612 | }
613 | @keyframes fadeUpIn {
614 |   0% {
615 |     opacity: 0;
616 |     -webkit-transform: translateY(10%);
617 |             transform: translateY(10%);
618 |   }
619 |   100% {
620 |     opacity: 1;
621 |     -webkit-transform: translateY(0%);
622 |             transform: translateY(0%);
623 |   }
624 | }
625 | @-webkit-keyframes fadeUpOut {
626 |   0% {
627 |     opacity: 1;
628 |     -webkit-transform: translateY(0%);
629 |             transform: translateY(0%);
630 |   }
631 |   100% {
632 |     opacity: 0;
633 |     -webkit-transform: translateY(10%);
634 |             transform: translateY(10%);
635 |   }
636 | }
637 | @keyframes fadeUpOut {
638 |   0% {
639 |     opacity: 1;
640 |     -webkit-transform: translateY(0%);
641 |             transform: translateY(0%);
642 |   }
643 |   100% {
644 |     opacity: 0;
645 |     -webkit-transform: translateY(10%);
646 |             transform: translateY(10%);
647 |   }
648 | }
649 | 
650 | /* Fade Down */
651 | @-webkit-keyframes fadeDownIn {
652 |   0% {
653 |     opacity: 0;
654 |     -webkit-transform: translateY(-10%);
655 |             transform: translateY(-10%);
656 |   }
657 |   100% {
658 |     opacity: 1;
659 |     -webkit-transform: translateY(0%);
660 |             transform: translateY(0%);
661 |   }
662 | }
663 | @keyframes fadeDownIn {
664 |   0% {
665 |     opacity: 0;
666 |     -webkit-transform: translateY(-10%);
667 |             transform: translateY(-10%);
668 |   }
669 |   100% {
670 |     opacity: 1;
671 |     -webkit-transform: translateY(0%);
672 |             transform: translateY(0%);
673 |   }
674 | }
675 | @-webkit-keyframes fadeDownOut {
676 |   0% {
677 |     opacity: 1;
678 |     -webkit-transform: translateY(0%);
679 |             transform: translateY(0%);
680 |   }
681 |   100% {
682 |     opacity: 0;
683 |     -webkit-transform: translateY(-10%);
684 |             transform: translateY(-10%);
685 |   }
686 | }
687 | @keyframes fadeDownOut {
688 |   0% {
689 |     opacity: 1;
690 |     -webkit-transform: translateY(0%);
691 |             transform: translateY(0%);
692 |   }
693 |   100% {
694 |     opacity: 0;
695 |     -webkit-transform: translateY(-10%);
696 |             transform: translateY(-10%);
697 |   }
698 | }
699 | 
700 | /*--------------
701 |       Scale
702 | ---------------*/
703 | 
704 | .scale.transition.in {
705 |   -webkit-animation-name: scaleIn;
706 |           animation-name: scaleIn;
707 | }
708 | .scale.transition.out {
709 |   -webkit-animation-name: scaleOut;
710 |           animation-name: scaleOut;
711 | }
712 | 
713 | /* Scale */
714 | @-webkit-keyframes scaleIn {
715 |   0% {
716 |     opacity: 0;
717 |     -webkit-transform: scale(0.7);
718 |             transform: scale(0.7);
719 |   }
720 |   100% {
721 |     opacity: 1;
722 |     -webkit-transform: scale(1);
723 |             transform: scale(1);
724 |   }
725 | }
726 | @keyframes scaleIn {
727 |   0% {
728 |     opacity: 0;
729 |     -webkit-transform: scale(0.7);
730 |             transform: scale(0.7);
731 |   }
732 |   100% {
733 |     opacity: 1;
734 |     -webkit-transform: scale(1);
735 |             transform: scale(1);
736 |   }
737 | }
738 | @-webkit-keyframes scaleOut {
739 |   0% {
740 |     opacity: 1;
741 |     -webkit-transform: scale(1);
742 |             transform: scale(1);
743 |   }
744 |   100% {
745 |     opacity: 0;
746 |     -webkit-transform: scale(0.7);
747 |             transform: scale(0.7);
748 |   }
749 | }
750 | @keyframes scaleOut {
751 |   0% {
752 |     opacity: 1;
753 |     -webkit-transform: scale(1);
754 |             transform: scale(1);
755 |   }
756 |   100% {
757 |     opacity: 0;
758 |     -webkit-transform: scale(0.7);
759 |             transform: scale(0.7);
760 |   }
761 | }
762 | 
763 | /*--------------
764 |      Drop
765 | ---------------*/
766 | 
767 | .drop.transition {
768 |   -webkit-transform-origin: top center;
769 |       -ms-transform-origin: top center;
770 |           transform-origin: top center;
771 |   -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
772 |           animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
773 | }
774 | .drop.transition.in {
775 |   -webkit-animation-name: dropIn;
776 |           animation-name: dropIn;
777 | }
778 | .drop.transition.out {
779 |   -webkit-animation-name: dropOut;
780 |           animation-name: dropOut;
781 | }
782 | 
783 | /* Scale */
784 | @-webkit-keyframes dropIn {
785 |   0% {
786 |     opacity: 0;
787 |     -webkit-transform: scale(0);
788 |             transform: scale(0);
789 |   }
790 |   100% {
791 |     opacity: 1;
792 |     -webkit-transform: scale(1);
793 |             transform: scale(1);
794 |   }
795 | }
796 | @keyframes dropIn {
797 |   0% {
798 |     opacity: 0;
799 |     -webkit-transform: scale(0);
800 |             transform: scale(0);
801 |   }
802 |   100% {
803 |     opacity: 1;
804 |     -webkit-transform: scale(1);
805 |             transform: scale(1);
806 |   }
807 | }
808 | @-webkit-keyframes dropOut {
809 |   0% {
810 |     opacity: 1;
811 |     -webkit-transform: scale(1);
812 |             transform: scale(1);
813 |   }
814 |   100% {
815 |     opacity: 0;
816 |     -webkit-transform: scale(0);
817 |             transform: scale(0);
818 |   }
819 | }
820 | @keyframes dropOut {
821 |   0% {
822 |     opacity: 1;
823 |     -webkit-transform: scale(1);
824 |             transform: scale(1);
825 |   }
826 |   100% {
827 |     opacity: 0;
828 |     -webkit-transform: scale(0);
829 |             transform: scale(0);
830 |   }
831 | }
832 | 
833 | /*--------------
834 |      Browse
835 | ---------------*/
836 | 
837 | .browse.transition.in {
838 |   -webkit-animation-name: browseIn;
839 |           animation-name: browseIn;
840 |   -webkit-animation-timing-function: ease;
841 |           animation-timing-function: ease;
842 | }
843 | .browse.transition.out,
844 | .browse.transition.out.left {
845 |   -webkit-animation-name: browseOutLeft;
846 |           animation-name: browseOutLeft;
847 |   -webkit-animation-timing-function: ease;
848 |           animation-timing-function: ease;
849 | }
850 | .browse.transition.out.right {
851 |   -webkit-animation-name: browseOutRight;
852 |           animation-name: browseOutRight;
853 |   -webkit-animation-timing-function: ease;
854 |           animation-timing-function: ease;
855 | }
856 | @-webkit-keyframes browseIn {
857 |   0% {
858 |     -webkit-transform: scale(0.8) translateZ(0px);
859 |             transform: scale(0.8) translateZ(0px);
860 |     z-index: -1;
861 |   }
862 |   10% {
863 |     -webkit-transform: scale(0.8) translateZ(0px);
864 |             transform: scale(0.8) translateZ(0px);
865 |     z-index: -1;
866 |     opacity: 0.7;
867 |   }
868 |   80% {
869 |     -webkit-transform: scale(1.05) translateZ(0px);
870 |             transform: scale(1.05) translateZ(0px);
871 |     opacity: 1;
872 |     z-index: 999;
873 |   }
874 |   100% {
875 |     -webkit-transform: scale(1) translateZ(0px);
876 |             transform: scale(1) translateZ(0px);
877 |     z-index: 999;
878 |   }
879 | }
880 | @keyframes browseIn {
881 |   0% {
882 |     -webkit-transform: scale(0.8) translateZ(0px);
883 |             transform: scale(0.8) translateZ(0px);
884 |     z-index: -1;
885 |   }
886 |   10% {
887 |     -webkit-transform: scale(0.8) translateZ(0px);
888 |             transform: scale(0.8) translateZ(0px);
889 |     z-index: -1;
890 |     opacity: 0.7;
891 |   }
892 |   80% {
893 |     -webkit-transform: scale(1.05) translateZ(0px);
894 |             transform: scale(1.05) translateZ(0px);
895 |     opacity: 1;
896 |     z-index: 999;
897 |   }
898 |   100% {
899 |     -webkit-transform: scale(1) translateZ(0px);
900 |             transform: scale(1) translateZ(0px);
901 |     z-index: 999;
902 |   }
903 | }
904 | @-webkit-keyframes browseOutLeft {
905 |   0% {
906 |     z-index: 999;
907 |     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
908 |             transform: translateX(0%) rotateY(0deg) rotateX(0deg);
909 |   }
910 |   50% {
911 |     z-index: -1;
912 |     -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
913 |             transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
914 |   }
915 |   80% {
916 |     opacity: 1;
917 |   }
918 |   100% {
919 |     z-index: -1;
920 |     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
921 |             transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
922 |     opacity: 0;
923 |   }
924 | }
925 | @keyframes browseOutLeft {
926 |   0% {
927 |     z-index: 999;
928 |     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
929 |             transform: translateX(0%) rotateY(0deg) rotateX(0deg);
930 |   }
931 |   50% {
932 |     z-index: -1;
933 |     -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
934 |             transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
935 |   }
936 |   80% {
937 |     opacity: 1;
938 |   }
939 |   100% {
940 |     z-index: -1;
941 |     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
942 |             transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
943 |     opacity: 0;
944 |   }
945 | }
946 | @-webkit-keyframes browseOutRight {
947 |   0% {
948 |     z-index: 999;
949 |     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
950 |             transform: translateX(0%) rotateY(0deg) rotateX(0deg);
951 |   }
952 |   50% {
953 |     z-index: 1;
954 |     -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
955 |             transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
956 |   }
957 |   80% {
958 |     opacity: 1;
959 |   }
960 |   100% {
961 |     z-index: 1;
962 |     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
963 |             transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
964 |     opacity: 0;
965 |   }
966 | }
967 | @keyframes browseOutRight {
968 |   0% {
969 |     z-index: 999;
970 |     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
971 |             transform: translateX(0%) rotateY(0deg) rotateX(0deg);
972 |   }
973 |   50% {
974 |     z-index: 1;
975 |     -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
976 |             transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
977 |   }
978 |   80% {
979 |     opacity: 1;
980 |   }
981 |   100% {
982 |     z-index: 1;
983 |     -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
984 |             transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
985 |     opacity: 0;
986 |   }
987 | }
988 | 
989 | 
990 | /*******************************
991 |          Site Overrides
992 | *******************************/
993 | 
994 | 


--------------------------------------------------------------------------------
/dist/transition.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * # Semantic - Transition
  3 |  * http://github.com/semantic-org/semantic-ui/
  4 |  *
  5 |  *
  6 |  * Copyright 2014 Contributor
  7 |  * Released under the MIT license
  8 |  * http://opensource.org/licenses/MIT
  9 |  *
 10 |  */
 11 | 
 12 | ;(function ( $, window, document, undefined ) {
 13 | 
 14 | "use strict";
 15 | 
 16 | $.fn.transition = function() {
 17 |   var
 18 |     $allModules     = $(this),
 19 |     moduleSelector  = $allModules.selector || '',
 20 | 
 21 |     time            = new Date().getTime(),
 22 |     performance     = [],
 23 | 
 24 |     moduleArguments = arguments,
 25 |     query           = moduleArguments[0],
 26 |     queryArguments  = [].slice.call(arguments, 1),
 27 |     methodInvoked   = (typeof query === 'string'),
 28 | 
 29 |     requestAnimationFrame = window.requestAnimationFrame
 30 |       || window.mozRequestAnimationFrame
 31 |       || window.webkitRequestAnimationFrame
 32 |       || window.msRequestAnimationFrame
 33 |       || function(callback) { setTimeout(callback, 0); },
 34 | 
 35 |     returnedValue
 36 |   ;
 37 |   $allModules
 38 |     .each(function() {
 39 |       var
 40 |         $module  = $(this),
 41 |         element  = this,
 42 | 
 43 |         // set at run time
 44 |         settings,
 45 |         instance,
 46 | 
 47 |         error,
 48 |         className,
 49 |         metadata,
 50 |         animationStart,
 51 |         animationEnd,
 52 |         animationName,
 53 | 
 54 |         namespace,
 55 |         moduleNamespace,
 56 |         eventNamespace,
 57 |         module
 58 |       ;
 59 | 
 60 |       module = {
 61 | 
 62 |         initialize: function() {
 63 | 
 64 |           // get full settings
 65 |           moduleNamespace = 'module-' + namespace;
 66 |           settings        = module.get.settings.apply(element, moduleArguments);
 67 |           className       = settings.className;
 68 |           metadata        = settings.metadata;
 69 | 
 70 |           animationStart  = module.get.animationStartEvent();
 71 |           animationEnd    = module.get.animationEndEvent();
 72 |           animationName   = module.get.animationName();
 73 |           error           = settings.error;
 74 |           namespace       = settings.namespace;
 75 |           eventNamespace  = '.' + settings.namespace;
 76 |           instance        = $module.data(moduleNamespace) || module;
 77 | 
 78 |           if(methodInvoked) {
 79 |             methodInvoked = module.invoke(query);
 80 |           }
 81 |           // no internal method was found matching query or query not made
 82 |           if(methodInvoked === false) {
 83 |             module.verbose('Converted arguments into settings object', settings);
 84 |             module.animate();
 85 |             module.instantiate();
 86 |           }
 87 |         },
 88 | 
 89 |         instantiate: function() {
 90 |           module.verbose('Storing instance of module', module);
 91 |           $module
 92 |             .data(moduleNamespace, instance)
 93 |           ;
 94 |         },
 95 | 
 96 |         destroy: function() {
 97 |           module.verbose('Destroying previous module for', element);
 98 |           $module
 99 |             .removeData(moduleNamespace)
100 |           ;
101 |         },
102 | 
103 |         refresh: function() {
104 |           module.verbose('Refreshing display type on next animation');
105 |           delete module.displayType;
106 |         },
107 | 
108 |         forceRepaint: function() {
109 |           module.verbose('Forcing element repaint');
110 |           var
111 |             $parentElement = $module.parent(),
112 |             $nextElement = $module.next()
113 |           ;
114 |           if($nextElement.size() === 0) {
115 |             $module.detach().appendTo($parentElement);
116 |           }
117 |           else {
118 |             $module.detach().insertBefore($nextElement);
119 |           }
120 |         },
121 | 
122 |         repaint: function() {
123 |           module.verbose('Repainting element');
124 |           var
125 |             fakeAssignment = element.offsetWidth
126 |           ;
127 |         },
128 | 
129 |         animate: function(overrideSettings) {
130 |           settings = overrideSettings || settings;
131 |           if(!module.is.supported()) {
132 |             module.error(error.support);
133 |             return false;
134 |           }
135 |           module.debug('Preparing animation', settings.animation);
136 |           if(module.is.animating()) {
137 |             if(settings.queue) {
138 |               if(!settings.allowRepeats && module.has.direction() && module.is.occuring() && module.queuing !== true) {
139 |                 module.error(error.repeated, settings.animation, $module);
140 |               }
141 |               else {
142 |                 module.queue(settings.animation);
143 |               }
144 |               return false;
145 |             }
146 |             else {
147 | 
148 |             }
149 |           }
150 |           if( module.can.animate() ) {
151 |             module.set.animating(settings.animation);
152 |           }
153 |           else {
154 |             module.error(error.noAnimation, settings.animation, element);
155 |           }
156 |         },
157 | 
158 |         reset: function() {
159 |           module.debug('Resetting animation to beginning conditions');
160 |           module.remove.animationEndCallback();
161 |           module.restore.conditions();
162 |           module.remove.animating();
163 |         },
164 | 
165 |         queue: function(animation) {
166 |           module.debug('Queueing animation of', animation);
167 |           module.queuing = true;
168 |           $module
169 |             .one(animationEnd + eventNamespace, function() {
170 |               module.queuing = false;
171 |               module.repaint();
172 |               module.animate.apply(this, settings);
173 |             })
174 |           ;
175 |         },
176 | 
177 |         complete: function () {
178 |           module.verbose('CSS animation complete', settings.animation);
179 |           module.remove.animationEndCallback();
180 |           module.remove.failSafe();
181 |           if(!module.is.looping()) {
182 |             if( module.is.outward() ) {
183 |               module.verbose('Animation is outward, hiding element');
184 |               module.restore.conditions();
185 |               module.hide();
186 |               $.proxy(settings.onHide, this)();
187 |             }
188 |             else if( module.is.inward() ) {
189 |               module.verbose('Animation is outward, showing element');
190 |               module.restore.conditions();
191 |               module.show();
192 |               module.set.display();
193 |               $.proxy(settings.onShow, this)();
194 |             }
195 |             else {
196 |               module.restore.conditions();
197 |             }
198 |             module.remove.animation();
199 |             module.remove.animating();
200 |           }
201 |           $.proxy(settings.onComplete, this)();
202 |         },
203 | 
204 |         has: {
205 |           direction: function(animation) {
206 |             animation = animation || settings.animation;
207 |             if( animation.search(className.inward) !== -1 || animation.search(className.outward) !== -1) {
208 |               module.debug('Direction already set in animation');
209 |               return true;
210 |             }
211 |             return false;
212 |           },
213 |           inlineDisplay: function() {
214 |             var
215 |               style = $module.attr('style') || ''
216 |             ;
217 |             return $.isArray(style.match(/display.*?;/, ''));
218 |           }
219 |         },
220 | 
221 |         set: {
222 |           animating: function(animation) {
223 |             animation = animation || settings.animation;
224 |             if(!module.is.animating()) {
225 |               module.save.conditions();
226 |             }
227 |             module.remove.direction();
228 |             module.remove.animationEndCallback();
229 |             if(module.can.transition() && !module.has.direction()) {
230 |               module.set.direction();
231 |             }
232 |             module.remove.hidden();
233 |             module.set.display();
234 |             $module
235 |               .addClass(className.animating)
236 |               .addClass(className.transition)
237 |               .addClass(animation)
238 |               .one(animationEnd + '.complete' + eventNamespace, module.complete)
239 |             ;
240 |             if(settings.useFailSafe) {
241 |               module.add.failSafe();
242 |             }
243 |             module.set.duration(settings.duration);
244 |             $.proxy(settings.onStart, this)();
245 |             module.debug('Starting tween', animation, $module.attr('class'));
246 |           },
247 |           duration: function(animationName, duration) {
248 |             duration = duration || settings.duration;
249 |             duration = (typeof duration == 'number')
250 |               ? duration + 'ms'
251 |               : duration
252 |             ;
253 |             module.verbose('Setting animation duration', duration);
254 |             $module
255 |               .css({
256 |                 '-webkit-animation-duration': duration,
257 |                 '-moz-animation-duration': duration,
258 |                 '-ms-animation-duration': duration,
259 |                 '-o-animation-duration': duration,
260 |                 'animation-duration':  duration
261 |               })
262 |             ;
263 |           },
264 |           display: function() {
265 |             var
266 |               style              = module.get.style(),
267 |               displayType        = module.get.displayType(),
268 |               overrideStyle      = style + 'display: ' + displayType + ' !important;'
269 |             ;
270 |             $module.css('display', '');
271 |             module.refresh();
272 |             if( $module.css('display') !== displayType ) {
273 |               module.verbose('Setting inline visibility to', displayType);
274 |               $module
275 |                 .attr('style', overrideStyle)
276 |               ;
277 |             }
278 |           },
279 |           direction: function() {
280 |             if($module.is(':visible') && !module.is.hidden()) {
281 |               module.debug('Automatically determining the direction of animation', 'Outward');
282 |               $module
283 |                 .removeClass(className.inward)
284 |                 .addClass(className.outward)
285 |               ;
286 |             }
287 |             else {
288 |               module.debug('Automatically determining the direction of animation', 'Inward');
289 |               $module
290 |                 .removeClass(className.outward)
291 |                 .addClass(className.inward)
292 |               ;
293 |             }
294 |           },
295 |           looping: function() {
296 |             module.debug('Transition set to loop');
297 |             $module
298 |               .addClass(className.looping)
299 |             ;
300 |           },
301 |           hidden: function() {
302 |             if(!module.is.hidden()) {
303 |               $module
304 |                 .addClass(className.transition)
305 |                 .addClass(className.hidden)
306 |               ;
307 |               if($module.css('display') !== 'none') {
308 |                 module.verbose('Overriding default display to hide element');
309 |                 $module
310 |                   .css('display', 'none')
311 |                 ;
312 |               }
313 |             }
314 |           },
315 |           visible: function() {
316 |             $module
317 |               .addClass(className.transition)
318 |               .addClass(className.visible)
319 |             ;
320 |           }
321 |         },
322 | 
323 |         save: {
324 |           displayType: function(displayType) {
325 |             $module.data(metadata.displayType, displayType);
326 |           },
327 |           transitionExists: function(animation, exists) {
328 |             $.fn.transition.exists[animation] = exists;
329 |             module.verbose('Saving existence of transition', animation, exists);
330 |           },
331 |           conditions: function() {
332 |             var
333 |               clasName = $module.attr('class') || false,
334 |               style = $module.attr('style') || ''
335 |             ;
336 |             $module.removeClass(settings.animation);
337 |             module.remove.direction();
338 |             module.cache = {
339 |               className : $module.attr('class'),
340 |               style     : module.get.style()
341 |             };
342 |             module.verbose('Saving original attributes', module.cache);
343 |           }
344 |         },
345 | 
346 |         restore: {
347 |           conditions: function() {
348 |             if(module.cache === undefined) {
349 |               return false;
350 |             }
351 |             if(module.cache.className) {
352 |               $module.attr('class', module.cache.className);
353 |             }
354 |             else {
355 |               $module.removeAttr('class');
356 |             }
357 |             if(module.cache.style) {
358 |               module.verbose('Restoring original style attribute', module.cache.style);
359 |               $module.attr('style', module.cache.style);
360 |             }
361 |             if(module.is.looping()) {
362 |               module.remove.looping();
363 |             }
364 |             module.verbose('Restoring original attributes', module.cache);
365 |           }
366 |         },
367 | 
368 |         add: {
369 |           failSafe: function() {
370 |             var
371 |               duration = module.get.duration()
372 |             ;
373 |             module.timer = setTimeout(module.complete, duration + 100);
374 |             module.verbose('Adding fail safe timer', module.timer);
375 |           }
376 |         },
377 | 
378 |         remove: {
379 |           animating: function() {
380 |             $module.removeClass(className.animating);
381 |           },
382 |           animation: function() {
383 |             $module
384 |               .css({
385 |                 '-webkit-animation' : '',
386 |                 '-moz-animation'    : '',
387 |                 '-ms-animation'     : '',
388 |                 '-o-animation'      : '',
389 |                 'animation'         : ''
390 |               })
391 |             ;
392 |           },
393 |           animationEndCallback: function() {
394 |             $module.off('.complete');
395 |           },
396 |           display: function() {
397 |             $module.css('display', '');
398 |           },
399 |           direction: function() {
400 |             $module
401 |               .removeClass(className.inward)
402 |               .removeClass(className.outward)
403 |             ;
404 |           },
405 |           failSafe: function() {
406 |             module.verbose('Removing fail safe timer', module.timer);
407 |             if(module.timer) {
408 |               clearTimeout(module.timer);
409 |             }
410 |           },
411 |           hidden: function() {
412 |             $module.removeClass(className.hidden);
413 |           },
414 |           visible: function() {
415 |             $module.removeClass(className.visible);
416 |           },
417 |           looping: function() {
418 |             module.debug('Transitions are no longer looping');
419 |             $module
420 |               .removeClass(className.looping)
421 |             ;
422 |             module.forceRepaint();
423 |           },
424 |           transition: function() {
425 |             $module
426 |               .removeClass(className.visible)
427 |               .removeClass(className.hidden)
428 |             ;
429 |           }
430 |         },
431 |         get: {
432 |           settings: function(animation, duration, onComplete) {
433 |             // single settings object
434 |             if(typeof animation == 'object') {
435 |               return $.extend(true, {}, $.fn.transition.settings, animation);
436 |             }
437 |             // all arguments provided
438 |             else if(typeof onComplete == 'function') {
439 |               return $.extend({}, $.fn.transition.settings, {
440 |                 animation  : animation,
441 |                 onComplete : onComplete,
442 |                 duration   : duration
443 |               });
444 |             }
445 |             // only duration provided
446 |             else if(typeof duration == 'string' || typeof duration == 'number') {
447 |               return $.extend({}, $.fn.transition.settings, {
448 |                 animation : animation,
449 |                 duration  : duration
450 |               });
451 |             }
452 |             // duration is actually settings object
453 |             else if(typeof duration == 'object') {
454 |               return $.extend({}, $.fn.transition.settings, duration, {
455 |                 animation : animation
456 |               });
457 |             }
458 |             // duration is actually callback
459 |             else if(typeof duration == 'function') {
460 |               return $.extend({}, $.fn.transition.settings, {
461 |                 animation  : animation,
462 |                 onComplete : duration
463 |               });
464 |             }
465 |             // only animation provided
466 |             else {
467 |               return $.extend({}, $.fn.transition.settings, {
468 |                 animation : animation
469 |               });
470 |             }
471 |             return $.fn.transition.settings;
472 |           },
473 |           duration: function(duration) {
474 |             duration = duration || settings.duration;
475 |             return (typeof settings.duration === 'string')
476 |               ? (duration.indexOf('ms') > -1)
477 |                 ? parseFloat(duration)
478 |                 : parseFloat(duration) * 1000
479 |               : duration
480 |             ;
481 |           },
482 |           displayType: function() {
483 |             if(settings.displayType) {
484 |               return settings.displayType;
485 |             }
486 |             if($module.data(metadata.displayType) === undefined) {
487 |               // create fake element to determine display state
488 |               module.can.transition(true);
489 |             }
490 |             return $module.data(metadata.displayType);
491 |           },
492 |           style: function() {
493 |             var
494 |               style = $module.attr('style') || ''
495 |             ;
496 |             return style.replace(/display.*?;/, '');
497 |           },
498 |           transitionExists: function(animation) {
499 |             return $.fn.transition.exists[animation];
500 |           },
501 |           animationName: function() {
502 |             var
503 |               element     = document.createElement('div'),
504 |               animations  = {
505 |                 'animation'       :'animationName',
506 |                 'OAnimation'      :'oAnimationName',
507 |                 'MozAnimation'    :'mozAnimationName',
508 |                 'WebkitAnimation' :'webkitAnimationName'
509 |               },
510 |               animation
511 |             ;
512 |             for(animation in animations){
513 |               if( element.style[animation] !== undefined ){
514 |                 return animations[animation];
515 |               }
516 |             }
517 |             return false;
518 |           },
519 |           animationStartEvent: function() {
520 |             var
521 |               element     = document.createElement('div'),
522 |               animations  = {
523 |                 'animation'       :'animationstart',
524 |                 'OAnimation'      :'oAnimationStart',
525 |                 'MozAnimation'    :'mozAnimationStart',
526 |                 'WebkitAnimation' :'webkitAnimationStart'
527 |               },
528 |               animation
529 |             ;
530 |             for(animation in animations){
531 |               if( element.style[animation] !== undefined ){
532 |                 return animations[animation];
533 |               }
534 |             }
535 |             return false;
536 |           },
537 |           animationEndEvent: function() {
538 |             var
539 |               element     = document.createElement('div'),
540 |               animations  = {
541 |                 'animation'       :'animationend',
542 |                 'OAnimation'      :'oAnimationEnd',
543 |                 'MozAnimation'    :'mozAnimationEnd',
544 |                 'WebkitAnimation' :'webkitAnimationEnd'
545 |               },
546 |               animation
547 |             ;
548 |             for(animation in animations){
549 |               if( element.style[animation] !== undefined ){
550 |                 return animations[animation];
551 |               }
552 |             }
553 |             return false;
554 |           }
555 | 
556 |         },
557 | 
558 |         can: {
559 |           transition: function(forced) {
560 |             var
561 |               elementClass      = $module.attr('class'),
562 |               tagName           = $module.prop('tagName'),
563 |               animation         = settings.animation,
564 |               transitionExists  = module.get.transitionExists(animation),
565 |               $clone,
566 |               currentAnimation,
567 |               inAnimation,
568 |               directionExists,
569 |               displayType
570 |             ;
571 |             if( transitionExists === undefined || forced) {
572 |               module.verbose('Determining whether animation exists');
573 |               $clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module);
574 |               currentAnimation = $clone
575 |                 .addClass(animation)
576 |                 .removeClass(className.inward)
577 |                 .removeClass(className.outward)
578 |                 .addClass(className.animating)
579 |                 .addClass(className.transition)
580 |                 .css(animationName)
581 |               ;
582 |               inAnimation = $clone
583 |                 .addClass(className.inward)
584 |                 .css(animationName)
585 |               ;
586 |               displayType = $clone
587 |                 .attr('class', elementClass)
588 |                 .removeAttr('style')
589 |                 .removeClass(className.hidden)
590 |                 .removeClass(className.visible)
591 |                 .show()
592 |                 .css('display')
593 |               ;
594 |               module.verbose('Determining final display state', displayType);
595 |               $clone.remove();
596 |               if(currentAnimation != inAnimation) {
597 |                 module.debug('Direction exists for animation', animation);
598 |                 directionExists = true;
599 |               }
600 |               else if(currentAnimation == 'none' || !currentAnimation) {
601 |                 module.debug('No animation defined in css', animation);
602 |                 return;
603 |               }
604 |               else {
605 |                 module.debug('Static animation found', animation, displayType);
606 |                 directionExists = false;
607 |               }
608 |               module.save.displayType(displayType);
609 |               module.save.transitionExists(animation, directionExists);
610 |             }
611 |             return (transitionExists !== undefined)
612 |               ? transitionExists
613 |               : directionExists
614 |             ;
615 |           },
616 |           animate: function() {
617 |             // can transition does not return a value if animation does not exist
618 |             return (module.can.transition() !== undefined);
619 |           }
620 |         },
621 | 
622 |         is: {
623 |           animating: function() {
624 |             return $module.hasClass(className.animating);
625 |           },
626 |           inward: function() {
627 |             return $module.hasClass(className.inward);
628 |           },
629 |           outward: function() {
630 |             return $module.hasClass(className.outward);
631 |           },
632 |           looping: function() {
633 |             return $module.hasClass(className.looping);
634 |           },
635 |           occuring: function(animation) {
636 |             animation = animation || settings.animation;
637 |             animation = animation.replace(' ', '.');
638 |             return ( $module.filter(animation).size() > 0 );
639 |           },
640 |           visible: function() {
641 |             return $module.is(':visible');
642 |           },
643 |           hidden: function() {
644 |             return $module.css('visibility') === 'hidden';
645 |           },
646 |           supported: function() {
647 |             return(animationName !== false && animationEnd !== false);
648 |           }
649 |         },
650 | 
651 |         hide: function() {
652 |           module.verbose('Hiding element');
653 |           if( module.is.animating() ) {
654 |             module.reset();
655 |           }
656 |           module.remove.display();
657 |           module.remove.visible();
658 |           module.set.hidden();
659 |           module.repaint();
660 |         },
661 | 
662 |         show: function(display) {
663 |           module.verbose('Showing element', display);
664 |           module.remove.hidden();
665 |           module.set.visible();
666 |           module.repaint();
667 |         },
668 | 
669 |         start: function() {
670 |           module.verbose('Starting animation');
671 |           $module.removeClass(className.disabled);
672 |         },
673 | 
674 |         stop: function() {
675 |           module.debug('Stopping animation');
676 |           $module.addClass(className.disabled);
677 |         },
678 | 
679 |         toggle: function() {
680 |           module.debug('Toggling play status');
681 |           $module.toggleClass(className.disabled);
682 |         },
683 | 
684 |         setting: function(name, value) {
685 |           module.debug('Changing setting', name, value);
686 |           if( $.isPlainObject(name) ) {
687 |             $.extend(true, settings, name);
688 |           }
689 |           else if(value !== undefined) {
690 |             settings[name] = value;
691 |           }
692 |           else {
693 |             return settings[name];
694 |           }
695 |         },
696 |         internal: function(name, value) {
697 |           if( $.isPlainObject(name) ) {
698 |             $.extend(true, module, name);
699 |           }
700 |           else if(value !== undefined) {
701 |             module[name] = value;
702 |           }
703 |           else {
704 |             return module[name];
705 |           }
706 |         },
707 |         debug: function() {
708 |           if(settings.debug) {
709 |             if(settings.performance) {
710 |               module.performance.log(arguments);
711 |             }
712 |             else {
713 |               module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
714 |               module.debug.apply(console, arguments);
715 |             }
716 |           }
717 |         },
718 |         verbose: function() {
719 |           if(settings.verbose && settings.debug) {
720 |             if(settings.performance) {
721 |               module.performance.log(arguments);
722 |             }
723 |             else {
724 |               module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
725 |               module.verbose.apply(console, arguments);
726 |             }
727 |           }
728 |         },
729 |         error: function() {
730 |           module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
731 |           module.error.apply(console, arguments);
732 |         },
733 |         performance: {
734 |           log: function(message) {
735 |             var
736 |               currentTime,
737 |               executionTime,
738 |               previousTime
739 |             ;
740 |             if(settings.performance) {
741 |               currentTime   = new Date().getTime();
742 |               previousTime  = time || currentTime;
743 |               executionTime = currentTime - previousTime;
744 |               time          = currentTime;
745 |               performance.push({
746 |                 'Name'           : message[0],
747 |                 'Arguments'      : [].slice.call(message, 1) || '',
748 |                 'Element'        : element,
749 |                 'Execution Time' : executionTime
750 |               });
751 |             }
752 |             clearTimeout(module.performance.timer);
753 |             module.performance.timer = setTimeout(module.performance.display, 600);
754 |           },
755 |           display: function() {
756 |             var
757 |               title = settings.name + ':',
758 |               totalTime = 0
759 |             ;
760 |             time = false;
761 |             clearTimeout(module.performance.timer);
762 |             $.each(performance, function(index, data) {
763 |               totalTime += data['Execution Time'];
764 |             });
765 |             title += ' ' + totalTime + 'ms';
766 |             if(moduleSelector) {
767 |               title += ' \'' + moduleSelector + '\'';
768 |             }
769 |             if($allModules.size() > 1) {
770 |               title += ' ' + '(' + $allModules.size() + ')';
771 |             }
772 |             if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
773 |               console.groupCollapsed(title);
774 |               if(console.table) {
775 |                 console.table(performance);
776 |               }
777 |               else {
778 |                 $.each(performance, function(index, data) {
779 |                   console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
780 |                 });
781 |               }
782 |               console.groupEnd();
783 |             }
784 |             performance = [];
785 |           }
786 |         },
787 |         // modified for transition to return invoke success
788 |         invoke: function(query, passedArguments, context) {
789 |           var
790 |             object = instance,
791 |             maxDepth,
792 |             found,
793 |             response
794 |           ;
795 |           passedArguments = passedArguments || queryArguments;
796 |           context         = element         || context;
797 |           if(typeof query == 'string' && object !== undefined) {
798 |             query    = query.split(/[\. ]/);
799 |             maxDepth = query.length - 1;
800 |             $.each(query, function(depth, value) {
801 |               var camelCaseValue = (depth != maxDepth)
802 |                 ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
803 |                 : query
804 |               ;
805 |               if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
806 |                 object = object[camelCaseValue];
807 |               }
808 |               else if( object[camelCaseValue] !== undefined ) {
809 |                 found = object[camelCaseValue];
810 |                 return false;
811 |               }
812 |               else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
813 |                 object = object[value];
814 |               }
815 |               else if( object[value] !== undefined ) {
816 |                 found = object[value];
817 |                 return false;
818 |               }
819 |               else {
820 |                 return false;
821 |               }
822 |             });
823 |           }
824 |           if ( $.isFunction( found ) ) {
825 |             response = found.apply(context, passedArguments);
826 |           }
827 |           else if(found !== undefined) {
828 |             response = found;
829 |           }
830 | 
831 |           if($.isArray(returnedValue)) {
832 |             returnedValue.push(response);
833 |           }
834 |           else if(returnedValue !== undefined) {
835 |             returnedValue = [returnedValue, response];
836 |           }
837 |           else if(response !== undefined) {
838 |             returnedValue = response;
839 |           }
840 |           return (found !== undefined)
841 |             ? found
842 |             : false
843 |           ;
844 |         }
845 |       };
846 |       module.initialize();
847 |     })
848 |   ;
849 |   return (returnedValue !== undefined)
850 |     ? returnedValue
851 |     : this
852 |   ;
853 | };
854 | 
855 | // Records if CSS transition is available
856 | $.fn.transition.exists = {};
857 | 
858 | $.fn.transition.settings = {
859 | 
860 |   // module info
861 |   name         : 'Transition',
862 | 
863 |   // debug content outputted to console
864 |   debug        : false,
865 | 
866 |   // verbose debug output
867 |   verbose      : true,
868 | 
869 |   // performance data output
870 |   performance  : true,
871 | 
872 |   // event namespace
873 |   namespace    : 'transition',
874 | 
875 |   // animation complete event
876 |   onStart      : function() {},
877 |   onComplete   : function() {},
878 |   onShow       : function() {},
879 |   onHide       : function() {},
880 | 
881 |   // whether timeout should be used to ensure callback fires in cases animationend does not
882 |   useFailSafe  : false,
883 | 
884 |   // whether EXACT animation can occur twice in a row
885 |   allowRepeats : false,
886 | 
887 |   // Override final display type on visible
888 |   displayType  : false,
889 | 
890 |   // animation duration
891 |   animation    : 'fade',
892 |   duration     : '500ms',
893 | 
894 |   // new animations will occur after previous ones
895 |   queue       : true,
896 | 
897 |   metadata : {
898 |     displayType: 'display'
899 |   },
900 | 
901 |   className   : {
902 |     animating  : 'animating',
903 |     disabled   : 'disabled',
904 |     hidden     : 'hidden',
905 |     inward     : 'in',
906 |     loading    : 'loading',
907 |     looping    : 'looping',
908 |     outward    : 'out',
909 |     transition : 'transition',
910 |     visible    : 'visible'
911 |   },
912 | 
913 |   // possible errors
914 |   error: {
915 |     noAnimation : 'There is no css animation matching the one you specified.',
916 |     repeated    : 'That animation is already occurring, cancelling repeated animation',
917 |     method      : 'The method you called is not defined',
918 |     support     : 'This browser does not support CSS animations'
919 |   }
920 | 
921 | };
922 | 
923 | 
924 | })( jQuery, window , document );
925 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <!-- Standard Meta -->
 5 |     <meta charset="utf-8" />
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 8 |     
 9 |     <title>Vue UI transitions example</title>
10 | 
11 |     <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
12 | 	<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.2.0/semantic.css" rel="stylesheet" type="text/css">
13 | </head>
14 | <body>
15 | 
16 |     <div id="app">
17 |         <div class="ui raised segment">
18 |             <div v-show="showPage" v-transition="fade">
19 |                 <h1>This is the demo page</h1>
20 |             </div>
21 | 
22 |             <div class="ui celled ordered list">
23 |                 <div class="item" v-repeat="players" v-transition="drop">{{$value}}</div>
24 |                 <div class="item" v-repeat="teams" v-transition="scale">{{$value}}</div>
25 |             </div>
26 |         </div>
27 |     </div>
28 | 
29 | 	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
30 | 	<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.2.0/semantic.js"></script>
31 |     <script src="/build/build.js"></script>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/example/main.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var domReady    = require('domready'),
 3 |     Vue         = require('vue'),
 4 |     transitions = require('..')
 5 | 
 6 | Vue.use(transitions)
 7 | 
 8 | domReady(function () {
 9 | 
10 |     window.app = new Vue({
11 |         data: {
12 |             showPage: true,
13 |             players: [],
14 |             teams: []
15 |         }
16 |     }).$mount('#app')
17 |     window.Vue = Vue
18 | 
19 |     /**
20 |      * Transition triggers
21 |      */
22 | 
23 |     setTimeout(function () {
24 |         app.players.push('mascherano');
25 |         app.teams.push('F.C. Barcelona');
26 | 
27 |         setTimeout(function () {
28 |             app.players.push('pique');
29 |             app.teams.push('Chelsea');
30 | 
31 |             setTimeout(function () {
32 |                 app.players.push('xavi');
33 |                 app.teams.push('Borussia Dortmund');
34 | 
35 |             }, 1000);
36 |         }, 1000);
37 |     }, 1000);
38 | 
39 |     setTimeout(function () {
40 |         app.showPage = false
41 |     }, 3500)
42 | 
43 | });
44 | 


--------------------------------------------------------------------------------
/example/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var path = require('path');
 3 | 
 4 | module.exports = {
 5 |     entry: "./main.js",
 6 |     output: {
 7 | 	    path: path.join(__dirname, 'build'),
 8 |         filename: "build.js"
 9 |     },
10 | 
11 |     module: {
12 |         loaders: [
13 |             { test: /\.jade$/, loader: 'html!jade' },
14 |             { test: /\.css$/, loader: 'style!css' }
15 |         ]
16 |     }
17 | };
18 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Register transitions using Vue.transition
 3 |  */
 4 | 
 5 | var transitions = require('./transitions');
 6 | 
 7 | var emphasis = [
 8 |     'flash',
 9 |     'shake',
10 |     'pulse',
11 |     'tada',
12 |     'bounce'
13 | ];
14 | 
15 | var appearance = [
16 |     'slide up',
17 |     'slide down',
18 |     'vertical flip',
19 |     'horizontal flip',
20 |     'fade',
21 |     'fade up',
22 |     'fade down',
23 |     'scale',
24 |     'drop',
25 |     'browse'
26 | ];
27 | 
28 | 
29 | /**
30 |  * Register all transitions globally
31 |  *
32 |  * @param Vue
33 |  */
34 | 
35 | module.exports = function (Vue, options) {
36 | 
37 |     var duration = (options || {}).duration || 700;
38 | 
39 |     emphasis.forEach(function (animation) {
40 |         var definition = transitions.defineEmphasis(animation, duration);
41 | 
42 |         Vue.transition(animation, definition);
43 |     });
44 | 
45 |     appearance.forEach(function (animation) {
46 |         var definition = transitions.defineAppearance(animation, duration);
47 |         var id = animation.split(' ').join('-');
48 | 
49 |         Vue.transition(id, definition);
50 |     });
51 | 
52 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "vueui-transitions",
 3 |     "version": "0.1.0",
 4 |     "description": "Use Semantic-UI transitions as v-transition in Vue.js",
 5 |     "main": "index.js",
 6 |     "devDependencies": {
 7 |         "vue": "0.11.x",
 8 |         "domready": "1.x.x",
 9 |         "webpack": "^1.4.10",
10 |         "html-webpack-plugin": "^1.1.0",
11 |         "css-loader": "^0.9.0",
12 |         "style-loader": "^0.8.1",
13 |         "jade-html-loader": "0.0.2",
14 |         "html-loader": "^0.2.3",
15 |         "jade": "^1.7.0"
16 |     },
17 |     "repository": {
18 |         "type": "git",
19 |         "url": "git://github.com:vueui/transitions.git"
20 |     },
21 |     "bugs": {
22 |         "url": "https://github.com/vueui/transitions/issues"
23 |     },
24 |     "keywords": [
25 |         "Vue-UI",
26 |         "plugin",
27 |         "Vue.js",
28 |         "transitions"
29 |     ],
30 |     "author": "Agon Bina <agon_bina@hotmail.com>",
31 |     "license": "MIT"
32 | }
33 | 


--------------------------------------------------------------------------------
/transitions.jade:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vueui/transitions/a7773b7fbe9b03931b42ceb56ea3fa15ce285ef7/transitions.jade


--------------------------------------------------------------------------------
/transitions.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * transition definition
 4 |  *
 5 |  * @param {String} name - Animation settings to use
 6 |  */
 7 | 
 8 | exports.defineEmphasis = function (name, duration) {
 9 | 
10 |     return {
11 |         beforeEnter: function (el) {
12 |             $(el).show();
13 |         },
14 | 
15 |         enter: function (el, done) {
16 |             $(el).transition(name, duration, done);
17 | 
18 |             return function() {
19 |                 $(el).transition('stop');
20 |             }
21 |         },
22 | 
23 |         leave: function (el, done) {
24 |             $(el)
25 |                 .transition('reset')
26 |                 .transition(name, duration, done)
27 |                 .hide();
28 | 
29 |             return function() {
30 |                 $(el).transition('stop');
31 |             }
32 |         }
33 |     };
34 | };
35 | 
36 | 
37 | /**
38 |  * transition definition
39 |  *
40 |  * @param {String} name - Animation name to use
41 |  */
42 | 
43 | exports.defineAppearance = function (name, duration) {
44 | 
45 |     return {
46 |         enter: function (el, done) {
47 |             $(el)
48 |                 .transition('reset')
49 |                 .transition(name + ' in', duration, done);
50 | 
51 |             return function() {
52 |                 $(el).transition('stop');
53 |             }
54 |         },
55 | 
56 |         leave: function (el, done) {
57 |             $(el)
58 |                 .transition('reset')
59 |                 .transition(name + ' out', duration, done);
60 | 
61 |             return function() {
62 |                 $(el).transition('stop');
63 |             }
64 |         }
65 |     };
66 | };


--------------------------------------------------------------------------------