moved to vue transitions properly

Author: paulpflug

README.md

@@ -37,17 +37,43 @@ not-dismissable| Boolean | false | will be not close on click outside of menu (o
 close-on-click | Boolean | false | will be closed on click inside of menu
 click-to-toggle | Boolean | false | opens on click instead of hover
 is-opened | Boolean | false | (two-way) set to open / close
-transition | String | - | name of vue transition
+transition | String | - | name of a vue transition. [Detailed description](#transition)
 
 #### Events
 Name |  description
 ---:| ---
-before-open | will be called before open animation
-opened |  will be called when opened
-before-close |  will be called before close animation
-closed |  will be called when closed
+before-enter | will be called before open animation
+after-enter |  will be called when opened
+before-leave |  will be called before close animation
+after-leave |  will be called when closed
 
-When a transition is given, it must emit the `opened` and `closed` events.
+#### Transition
+
+You can provide a vue transition like this:
+```js
+Vue.transition("fade",{
+  // your transition
+})
+// or in the instance:
+transitions: {
+  fade: {
+    // your transition
+  }
+}
+// usage:
+template: "<fab transition='fade'></fab>"
+```
+
+
+## Changelog
+
+- 1.1.0  
+moved transition to `vue-transitions` properly
+events are renamed after vue transitions  
+
+- 1.0.0  
+moved transition to `vue-transitions`  
+changed element from `span` to `a`  
 
 # Development
 Clone repository.
@@ -57,11 +83,6 @@ npm run dev
 ```
 Browse to `http://localhost:8080/`.
 
-## Changelog
-- 1.0.0  
-moved transition to `vue-transitions`  
-changed element from `span` to `a`  
-
 ## License
 Copyright (c) 2016 Paul Pflugradt
 Licensed under the MIT license.

package.json

@@ -17,7 +17,7 @@
     "node": "*"
   },
   "dependencies": {
-    "vue-mixins": "^0.2.14"
+    "vue-mixins": "^0.2.17"
   },
   "peerDependencies": {},
   "devDependencies": {
@@ -26,7 +26,7 @@
     "coffee-loader": "^0.7.2",
     "coffee-script": "^1.10.0",
     "gh-pages": "^0.11.0",
-    "karma": "^1.2.0",
+    "karma": "^1.3.0",
     "karma-chai": "^0.1.0",
     "karma-chai-dom": "^1.1.0",
     "karma-chai-spies": "^0.1.4",

src/fixed-action-button.vue

@@ -7,7 +7,7 @@ div(
     @mouseleave="onUnhover",
     :class="computedClass"
     )
-  ul(v-if="opened",v-el:fab, v-bind:transition="transition",v-bind:style="fabStyle")
+  ul(v-if="opened",v-el:fab, v-bind:transition="cTransition",v-bind:style="fabStyle")
     slot
   a(@click="onFabClick")
     slot(name="fab")
@@ -21,6 +21,7 @@ module.exports =
     require("vue-mixins/isOpened")
     require("vue-mixins/style")
     require("vue-mixins/class")
+    require("vue-mixins/transition")
   ]
 
 
@@ -38,12 +39,11 @@ module.exports =
     "notDismissable":
       type: Boolean
       default: false
-    "transition":
-      type: String
 
   computed:
     mergeStyle: -> position:"fixed"
     fabStyle: -> []
+
   methods:
     onHover: ->
       @open() unless @clickToToggle