refactor: Remove Velocity from Slide q-transition

Author: rstoenescu

.eslintrc.js

@@ -8,8 +8,7 @@ module.exports = {
     browser: true
   },
   globals: {
-    '__THEME': true,
-    'Velocity': true
+    '__THEME': true
   },
   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
   extends: 'standard',

build/script.build.javascript.js

@@ -29,13 +29,11 @@ var
   },
   external = [
     'fastclick',
-    'moment',
-    'velocity-animate'
+    'moment'
   ],
   globals = {
     fastclick: 'FastClick',
-    moment: 'moment',
-    'velocity-animate': 'Velocity'
+    moment: 'moment'
   },
   rollupConfig = {
     entry: 'src/index.js',

dev/components/components/scroll-fire.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
     <div class="layout-padding">
-      <p class="caption">Please scroll down to see the image and Scroll Fire being called with a nice Velocity effect.</p>
+      <p class="caption">Please scroll down to see the image have a short bounce effect when being visible for first time.</p>
       <p v-for="n in 6">{{loremipsum}}</p>
 
-      <p class="caption">Scroll Fire below. Reload page to see the effect again.</p>
+      <p class="caption">Scroll Fire below. Reload page to see the bounce effect again.</p>
       <p class="text-center">
         <img v-scroll-fire="bounceImage" src="~assets/quasar.jpg" style="width: 200px">
       </p>
@@ -22,9 +22,13 @@ export default {
     }
   },
   methods: {
-    bounceImage (element) {
-      Velocity(element, 'fadeOut', {duration: 1000})
-      Velocity(element, 'fadeIn', {delay: 300, duration: 1000})
+    bounceImage (el) {
+      el.classList.add('animate-bounce')
+      setTimeout(() => {
+        if (document.body.contains(el)) {
+          el.classList.remove('animate-bounce')
+        }
+      }, 2050)
     }
   }
 }

dev/components/other/vue-transitions.vue

@@ -16,7 +16,7 @@
       </p>
 
       <q-transition name="slide">
-        <p v-show="visible">
+        <p v-show="visible" style="margin: 0">
           <img
             class="responsive"
             src="~assets/quasar.jpg"

package.json

@@ -86,7 +86,6 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^2.1.1",
     "url-loader": "^0.5.7",
-    "velocity-animate": "^1.2.3",
     "vue": "^2.1.6",
     "vue-loader": "^10.0.0",
     "vue-router": "^2.0.0",
@@ -100,7 +99,6 @@
   "peerDependencies": {
     "fastclick": "1.x",
     "moment": "2.x",
-    "velocity-animate": "1.x",
     "vue": "^2.1.6"
   }
 }

src/index.es6.js

@@ -1,6 +1,3 @@
-import Velocity from 'velocity-animate'
-window.Velocity = Velocity
-
 import install from './vue-install'
 import start from './start'
 import standaloneInstall from './standalone-install'

src/index.js

@@ -1,6 +1,3 @@
-import Velocity from 'velocity-animate'
-window.Velocity = Velocity
-
 import install from './vue-install'
 import start from './start'
 import standaloneInstall from './standalone-install'

src/utils/store.js

@@ -8,25 +8,19 @@ export function add (name, el, ctx) {
   if (!data[name]) {
     data[name] = {}
   }
-  else if (data[name][id]) {
-    console.warn('Element store [add]: overwriting data')
-  }
   data[name][id] = ctx
 }
 
 export function get (name, el) {
   let id = el.dataset['__' + name]
   if (!id) {
-    console.warn('Element store [get]: id not registered', name, el)
     return
   }
   if (!data[name]) {
-    console.warn('Element store [get]: name not registered', name, el)
     return
   }
   let ctx = data[name][id]
   if (!ctx) {
-    console.warn('Element store [get]: data not found for', name, ':', id, '->', el)
     return
   }
   return ctx
@@ -35,7 +29,6 @@ export function get (name, el) {
 export function remove (name, el) {
   let id = el.dataset['__' + name]
   if (!id) {
-    console.warn('Element store [remove]: id not registered', name, el)
     return
   }
   if (data[name] && data[name][id]) {

src/vue-install.js

@@ -3,7 +3,7 @@ import { install as eventsInstall } from './features/events'
 import { install as toastInstall } from './components/toast/toast'
 import { current as theme } from './features/theme'
 
-import Transition from './vue-transitions/transition'
+import Transition from './vue-transitions/index'
 
 import dBackToTop from './vue-directives/back-to-top'
 import dGoBack from './vue-directives/go-back'

src/vue-transitions/transition.js src/vue-transitions/index.jssrc/vue-transitions/transition.js renamed to src/vue-transitions/index.js

@@ -1,4 +1,4 @@
-import slide from './transition-slide'
+import slide from './slide-toggle'
 
 let transitions = {slide}
 
@@ -20,7 +20,7 @@ export default {
   },
   render (h, context) {
     if (!transitions[context.props.name]) {
-      throw new Error(`Quasar Transition ${context.props.name} is unnowkn.`)
+      throw new Error(`Quasar Transition ${context.props.name} is unknown.`)
     }
     var data = {
       props: {