feat: QSlideTransition/QTree/QCollapsible new prop: "duration" (Number)

Author: rstoenescu

src/components/collapsible/QCollapsible.js

@@ -27,6 +27,7 @@ export default {
     iconToggle: Boolean,
     collapseIcon: String,
     opened: Boolean,
+    duration: Number,
 
     headerStyle: [Array, String, Object],
     headerClass: [Array, String, Object]
@@ -124,7 +125,9 @@ export default {
           ])
           : h(QItemWrapper, this.__getItemProps(true), this.__getToggleSide(h, true)),
 
-        h(QSlideTransition, [
+        h(QSlideTransition, {
+          props: { duration: this.duration }
+        }, [
           h('div', {
             directives: [{ name: 'show', value: this.showing }]
           }, [

src/components/slide-transition/QSlideTransition.js

@@ -1,21 +1,25 @@
 export default {
   name: 'QSlideTransition',
   props: {
-    appear: Boolean
+    appear: Boolean,
+    duration: {
+      type: Number,
+      default: 300
+    }
   },
   methods: {
     __begin (el, height) {
       el.style.overflowY = 'hidden'
       if (height !== void 0) {
         el.style.height = `${height}px`
       }
-      el.classList.add('q-slide-transition')
+      el.style.transition = `height ${this.duration}ms cubic-bezier(.25, .8, .50, 1)`
       this.animating = true
     },
     __end (el, event) {
       el.style.overflowY = null
       el.style.height = null
-      el.classList.remove('q-slide-transition')
+      el.style.transition = null
       this.__cleanup()
       event !== this.lastEvent && this.$emit(event)
       this.animating = false

src/components/slide-transition/slide-transition.ios.styl

@@ -52,6 +52,8 @@ export default {
       }
     },
 
+    duration: Number,
+
     noNodesLabel: String,
     noResultsLabel: String
   },
@@ -492,7 +494,9 @@ export default {
         ]),
 
         isParent
-          ? h(QSlideTransition, [
+          ? h(QSlideTransition, {
+            props: { duration: this.duration }
+          }, [
             h('div', {
               directives: [{ name: 'show', value: meta.expanded }],
               staticClass: 'q-tree-node-collapsible',