├── examples
    ├── transition.css
    ├── animation.css
    ├── animation.html
    └── transition.html
├── .gitattributes
├── package.json
├── .gitignore
├── license
├── readme.md
└── vue-transition.js


/examples/transition.css:
--------------------------------------------------------------------------------
 1 | .rect {
 2 |   height: 100px;
 3 |   width: 100px;
 4 |   background: yellow;
 5 | }
 6 | 
 7 | .anime {
 8 |   width: 200px;
 9 | }
10 | 


--------------------------------------------------------------------------------
/examples/animation.css:
--------------------------------------------------------------------------------
 1 | .text{
 2 |     width: 200px;
 3 |     height: 50px;
 4 | }
 5 | 
 6 | .anime1{
 7 |     animation: bounce 1s linear 0s 2 alternate ;
 8 | }
 9 | 
10 | @keyframes bounce{
11 |     from{
12 |         font-size: 1em;
13 |     }
14 |     to{
15 |         font-size: 3em;
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-transition",
 3 |   "version": "0.1.3",
 4 |   "description": "A transition component for Vue",
 5 |   "main": "vue-transition.js",
 6 |   "repository":{
 7 |     "type":"git",
 8 |     "url":"https://github.com/Twiknight/vue-transition"
 9 |   },
10 |   "keywords": [
11 |     "vue",
12 |     "transition"
13 |   ],
14 |   "author": "Twiknight",
15 |   "license": "MIT",
16 |   "bugs":{
17 |       "url":"https://github.com/Twiknight/vue-transition/issues"
18 |   },
19 |   "homepage":"https://github.com/Twiknight/vue-transition"
20 | }
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Windows image file caches
 2 | Thumbs.db
 3 | ehthumbs.db
 4 | 
 5 | # Folder config file
 6 | Desktop.ini
 7 | 
 8 | # Recycle Bin used on file shares
 9 | $RECYCLE.BIN/
10 | 
11 | # Windows Installer files
12 | *.cab
13 | *.msi
14 | *.msm
15 | *.msp
16 | 
17 | # Windows shortcuts
18 | *.lnk
19 | 
20 | # =========================
21 | # Operating System Files
22 | # =========================
23 | 
24 | # OSX
25 | # =========================
26 | 
27 | .DS_Store
28 | .AppleDouble
29 | .LSOverride
30 | 
31 | # Thumbnails
32 | ._*
33 | 
34 | # Files that might appear in the root of a volume
35 | .DocumentRevisions-V100
36 | .fseventsd
37 | .Spotlight-V100
38 | .TemporaryItems
39 | .Trashes
40 | .VolumeIcon.icns
41 | 
42 | # Directories potentially created on remote AFP share
43 | .AppleDB
44 | .AppleDesktop
45 | Network Trash Folder
46 | Temporary Items
47 | .apdisk
48 | 
49 | #node
50 | node_modules
51 | 


--------------------------------------------------------------------------------
/license:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 
 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 | 


--------------------------------------------------------------------------------
/examples/animation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta charset="utf-8">
 5 |         <title>animation example</title>
 6 |         <script src="https://cdn.jsdelivr.net/vue/1.0.13/vue.min.js"></script>
 7 |         <link rel="stylesheet" href="animation.css" media="screen" title="no title" charset="utf-8">
 8 |         <script src="../vue-transition.js" charset="utf-8"></script>
 9 |     </head>
10 |     <body>
11 |         <div id="demo">
12 |             <button v-on:click='play'>play</button>
13 |             <button v-on:click="pause">pause</button>
14 |             <button v-on:click="replay">replay</button>
15 |             <div class="text">
16 |                 <span>
17 |                     {{msg}}
18 |                     <animation id="anime1" source="anime1"></animation>
19 |                 </span>
20 |             </div>
21 |         </div>
22 |         <script type="text/javascript">
23 |             new Vue({
24 |                 el:"#demo",
25 |                 data:function(){
26 |                     return{
27 |                         msg:"hello!"
28 |                     }
29 |                 },
30 |                 methods:{
31 |                     play:function(){
32 |                         this.animations["anime1"].play();
33 |                     },
34 |                     pause:function () {
35 |                         this.animations["anime1"].pause();
36 |                     },
37 |                     replay:function(){
38 |                         this.animations["anime1"].restart();
39 |                     }
40 |                 }
41 |             });
42 |         </script>
43 |     </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/examples/transition.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta charset="utf-8">
 5 |         <title>transition example</title>
 6 |         <script src="https://cdn.jsdelivr.net/vue/1.0.13/vue.min.js"></script>
 7 |         <link rel="stylesheet" href="transition.css" media="screen" title="no title" charset="utf-8">
 8 |         <script src="../vue-transition.js" charset="utf-8"></script>
 9 |     </head>
10 |     <body>
11 |         <div id="demo">
12 |           <button v-on:click="play">
13 |             play
14 |           </button>
15 |           <button v-on:click="undo">
16 |             undo
17 |           </button>
18 |           <button v-on:click="bounce">
19 |             bounce
20 |           </button>
21 | 
22 |           <div class='rect'>
23 |             {{logo}}
24 |             <transition id="ex" options="all 3s ease" source="anime"></transition>
25 |           </div>
26 |         </div>
27 |     </body>
28 |     <script type="text/javascript">
29 |         new Vue({
30 |           el: "#demo",
31 |           data() {
32 |             return {
33 |               logo: "hello"
34 |             }
35 |           },
36 |           methods: {
37 |             play: function() {
38 |               var _this = this;
39 |               this.transitions["ex"].play().then(function() {
40 |                 _this.logo = "play finished";
41 |               });
42 |             },
43 |             undo: function() {
44 |               var _this = this;
45 |               this.transitions["ex"].rollback().then(function() {
46 |                 _this.logo = "undo finished";
47 |               });
48 |             },
49 |             bounce: function(){
50 |                 var play = this.transitions["ex"].play;
51 |                 var rollback = this.transitions["ex"].rollback;
52 |                 play().then(rollback).then(play);
53 |             }
54 |         },
55 |         events:{
56 |             'transitionend':function(id){
57 |                 console.log("transition end : "+id);
58 |             }
59 |         }
60 |         })
61 |     </script>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Vue-transiton Component
 2 | A component to perform CSS transition using [Vue.js.](http://vuejs.org)
 3 | 
 4 | It allows you to trigger a transition whenever you like.
 5 | 
 6 | ## Installation
 7 | 
 8 |     npm install vue-transition
 9 | 
10 |  Or just include the file using a `<script>` tag.
11 | 
12 | ## Usage
13 | HTML:
14 | ```html
15 | <div id="demo">
16 |    <transition id="trans" options="all 0.5s ease" source="alert"></transition>
17 | </div>
18 | ```
19 | CSS:
20 | ```css
21 | .alert{
22 |     background-color:red;
23 | }
24 | ```
25 | Javascript:
26 | ```javascript
27 | new Vue("#demo",{
28 |     /*...your code here...*/
29 |     methods{
30 |         play:function(){
31 |             this.transitions["trans"].play()
32 |                                     .then(/*...your code here...*/);
33 |         },
34 |         rollback:function(){
35 |             this.transitions["trans"].rollback()
36 |                                         .then(/*...your code here...*/);
37 |         }
38 |     }
39 | })
40 | ```
41 | ## CommonJs
42 | ```javascript
43 | Vue.use(require('Vue-transiton'));
44 | /*...your code here...*/
45 | ```
46 | ## API reference
47 | 
48 | ### Transitions
49 | * `transition.play(options->string)->Promise` :
50 | This function will apply the transition by adding the source class
51 | you set .
52 | 
53 |  `options` : the options string of transition, like`"all 0.5s ease"` .
54 |  By default , the options used will be what you set on the transition component.
55 | 
56 |  The function returns a Promise that will resolve on the html element event `transitionend`.
57 |  If you don't like the Promise styled API,
58 |  Just listen to the `transitionend` __Vue__ event in the parent component.
59 | 
60 | * `transition.rollback(options->string)->Promise`:
61 | This function works just like `transition.play`.
62 | 
63 |   The only difference is this one removes the source class you set to make a rollback effect.
64 | 
65 | 
66 | ### Animations
67 | * `animation.play->Promise`:
68 | This function will apply the animation by adding the source animation class you set or continue a paused animation.
69 | 
70 |   The returned Promise will resolve on html event `animationend`or the same one named with `-webkit`.
71 |   And it will dispatch a Vue event `animationend`(No  -webkit here) together with its `id`.
72 | 
73 | * `animation.pause->Promise`:
74 | This function will pause the play animation by setting `animation-play-state` to `"paused"`.
75 |   So if you emit multiple animations on one element at the same time,
76 |   the `pause`function will pause them all.
77 | 
78 |   The returned Promise will directly resolve.
79 | 
80 | * `animation.restrat->Promise`:
81 | This function will stop the current animation and then restart it.
82 | 
83 |   Also, you can use it to restart a animation that is specified to work only once.
84 |   
85 |   The returned Promise will resolve on  `animationend` as `aniamtion.play`.
86 | 
87 | * Events:
88 | CSS animations emit three event: `animationstart`,`animationend`,`animationiteration`.
89 | All these will be wrapped as Vue events with the same name.
90 | 
91 |   You can listen to them in any of the parent components, as they'll be dispatched upwards.
92 | ## License
93 | MIT
94 | 


--------------------------------------------------------------------------------
/vue-transition.js:
--------------------------------------------------------------------------------
  1 | ;(function(){
  2 | 
  3 |     function install(Vue){
  4 |         var trans = Vue.extend({
  5 |                 template: '<element></element>',
  6 |                 props: ['id','options','source'],
  7 |                 methods: {
  8 |                     play: function(options){
  9 |                         var vm = this;
 10 | 
 11 |                         var opts = options || vm.options;
 12 |                         var el = vm.$el.parentElement;
 13 | 
 14 |                         if(!vm.regx.test(el.className)){
 15 |                             el.style.transition = opts;
 16 |                             el.className += " "+vm.source;
 17 |                         }
 18 |                         return new Promise(function(resolve, reject) {
 19 |                             vm.$once('transitionend', function(){
 20 |                                 setTimeout(resolve,0);
 21 |                             });
 22 |                         });
 23 |                     },
 24 |                     rollback:function(options){
 25 |                         var vm = this;
 26 |                         var opts = options || vm.options;
 27 |                         var el = vm.$el.parentElement;
 28 | 
 29 |                         if(vm.regx.test(el.className)){
 30 |                             el.style.transition = opts;
 31 |                             el.className = el.className.replace(vm.regx,'');
 32 |                         }
 33 | 
 34 |                         return new Promise(function(resolve, reject) {
 35 |                             vm.$once('transitionend', function(){
 36 |                                 setTimeout(resolve,0);
 37 |                             });
 38 |                         });
 39 |                     }
 40 |                 },
 41 |                 created(){
 42 |                     this.regx = new RegExp('\\b'+this.source+'\\b');
 43 |                 },
 44 |                 ready(){
 45 |                     var vm = this;
 46 |                     var el = vm.$el.parentElement;
 47 | 
 48 |                     el.addEventListener('transitionend', function(){
 49 |                         vm.$dispatch('transitionend',vm.id);
 50 |                     })
 51 |                     vm.$parent.transitions = vm.$parent.transitions || {};
 52 |                     vm.$parent.transitions[vm.id] = vm;
 53 |                 }
 54 |             });
 55 | 
 56 |         var anime = Vue.extend({
 57 |             template:'<element></element>',
 58 |             props:['id','source'],
 59 |             methods:{
 60 |                 play:function(){
 61 |                     var vm = this;
 62 |                     var el = vm.$el.parentElement;
 63 | 
 64 |                     if(!vm.regx.test(el.className)){
 65 |                         el.className +=" "+vm.source;
 66 |                     }
 67 | 
 68 |                     el.style['animation-play-state'] = 'running';
 69 |                     el.style['-webkit-animation-play-state'] = 'running';
 70 | 
 71 |                     return new Promise(function(resolve, reject) {
 72 |                         vm.$once('animationend', function(){
 73 |                             el.style['animation-play-state'] = 'paused';
 74 |                             el.style['-webkit-animation-play-state'] = 'paused';
 75 |                             resolve();
 76 |                         });
 77 |                     });
 78 |                 },
 79 |                 pause:function() {
 80 |                     var vm = this;
 81 |                     var el = vm.$el.parentElement;
 82 |                     el.style['animation-play-state'] = 'paused';
 83 |                     el.style['-webkit-animation-play-state'] = 'paused';
 84 |                     return new Promise(function(resolve, reject) {
 85 |                         resolve();
 86 |                     });
 87 |                 },
 88 |                 restart:function(){
 89 |                     var vm = this;
 90 |                     var el = vm.$el.parentElement;
 91 | 
 92 |                     if(!vm.regx.test(el.className)){
 93 |                         el.className +=" "+vm.source;
 94 |                     }
 95 |                     else{
 96 |                         el.className = el.className.replace(vm.regx,'');
 97 |                         setTimeout(function(){
 98 |                             el.className +=" "+vm.source;
 99 |                             el.style['animation-play-state'] = 'running';
100 |                             el.style['-webkit-animation-play-state'] = 'running';
101 |                         },1);
102 |                     }
103 | 
104 |                     return new Promise(function(resolve, reject) {
105 |                         vm.$once('animationend', function(){
106 |                             resolve();
107 |                         });
108 |                     });
109 |                 }
110 |             },
111 |             created(){
112 |                 this.regx = new RegExp('\\b'+this.source+'\\b');
113 |             },
114 |             ready(){
115 |                 var vm = this;
116 |                 var el = vm.$el.parentElement;
117 | 
118 |                 [
119 |                     'animationstart',
120 |                     'webkitAnimationStart'
121 |                 ].map(function(ev){
122 |                     el.addEventListener(ev, function(){
123 |                         vm.$dispatch('animationstart',vm.id);
124 |                     });
125 |                 });
126 |                 [
127 |                     'animationend',
128 |                     'webkitAnimationEnd'
129 |                 ].map(function(ev){
130 |                     el.addEventListener(ev, function(){
131 |                         vm.$dispatch('animationend',vm.id);
132 |                     });
133 |                 });
134 |                 [
135 |                     'animationiteration',
136 |                     'webkitAnimationIteration'
137 |                 ].map(function(ev){
138 |                     el.addEventListener(ev, function(){
139 |                         vm.$dispatch('animationiteration',vm.id);
140 |                     });
141 |                 });
142 | 
143 |                 vm.$parent.animations = vm.$parent.animations || {};
144 |                 vm.$parent.animations[vm.id] = vm;
145 |             }
146 |         });
147 | 
148 |         Vue.component('transition',trans);
149 |         Vue.component('animation',anime);
150 |     }
151 | 
152 |     if (typeof exports == "object") {
153 |         module.exports = install
154 |       } else if (typeof define == "function" && define.amd) {
155 |         define([], function(){ return install })
156 |       } else if (window.Vue) {
157 |         Vue.use(install);
158 |       }
159 | 
160 | })();
161 | 


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