Add support for transition-group with dynamic component is

attribute
BinarCode · Jan 2, 2018 · 80ad403 · 80ad403
1 parent 7723f59
commit 80ad403
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 67 deletions.
diff --git a/src/Collapse/CollapseTransition.vue b/src/Collapse/CollapseTransition.vue
@@ -7,7 +7,8 @@
              @enter="enter"
              @before-leave="beforeLeave"
              @leave="leave"
-             @after-leave="afterLeave">
+             @after-leave="afterLeave"
+             move-class="collapse-move">
     <slot></slot>
   </component>
 </template>
@@ -79,6 +80,8 @@
           el.style.paddingTop = 0;
           el.style.paddingBottom = 0;
         }
+        // necessary for transition-group
+        this.setAbsolutePosition(el)
       },
 
       afterLeave(el) {
@@ -92,4 +95,7 @@
   }
 </script>
 <style>
+  .collapse-move{
+    transition: transform .3s ease-in-out;
+  }
 </style>
diff --git a/src/Fade/FadeTransition.vue b/src/Fade/FadeTransition.vue
@@ -1,12 +1,9 @@
 <template>
   <component :is="componentType"
               v-bind="$attrs"
-              v-on="$listeners"
-              @before-enter="beforeEnter"
-              @after-enter="cleanUpStyles"
-              @before-leave="beforeLeave"
-              @after-leave="cleanUpStyles"
+              v-on="hooks"
               enter-active-class="fadeIn"
+              move-class="fade-move"
               leave-active-class="fadeOut">
     <slot></slot>
   </component>
@@ -46,4 +43,7 @@
   .fadeOut {
     animation-name: fadeOut;
   }
+  .fade-move{
+    transition: transform .3s ease-out;
+  }
 </style>
diff --git a/src/Scale/ScaleTransition.vue b/src/Scale/ScaleTransition.vue
@@ -1,12 +1,9 @@
 <template>
   <component :is="componentType"
              v-bind="$attrs"
-             v-on="$listeners"
-             @before-enter="beforeEnter"
-             @after-enter="cleanUpStyles"
-             @before-leave="beforeLeave"
-             @after-leave="cleanUpStyles"
+             v-on="hooks"
              enter-active-class="scaleIn"
+             move-class="scale-move"
              leave-active-class="scaleOut">
     <slot></slot>
   </component>
@@ -62,4 +59,7 @@
   .scaleOut {
     animation-name: scaleOut;
   }
+  .scale-move{
+    transition: transform .3s cubic-bezier(.25,.8,.50,1);
+  }
 </style>
diff --git a/src/Slide/SlideXLeftTransition.vue b/src/Slide/SlideXLeftTransition.vue
@@ -1,12 +1,9 @@
 <template>
   <component :is="componentType"
              v-bind="$attrs"
-             v-on="$listeners"
-             @before-enter="beforeEnter"
-             @after-enter="cleanUpStyles"
-             @before-leave="beforeLeave"
-             @after-leave="cleanUpStyles"
+             v-on="hooks"
              enter-active-class="slideXLeftIn"
+             move-class="slide-move"
              leave-active-class="slideXLeftOut">
     <slot></slot>
   </component>
@@ -29,7 +26,8 @@
     }
   }
 </script>
-<style>
+<style lang="scss">
+  @import "move";
   @keyframes slideXLeftIn {
     from {
       opacity: 0;

diff --git a/src/Slide/SlideXRightTransition.vue b/src/Slide/SlideXRightTransition.vue
@@ -1,12 +1,9 @@
 <template>
   <component :is="componentType"
              v-bind="$attrs"
-             v-on="$listeners"
-             @before-enter="beforeEnter"
-             @after-enter="cleanUpStyles"
-             @before-leave="beforeLeave"
-             @after-leave="cleanUpStyles"
+             v-on="hooks"
              enter-active-class="slideXRightIn"
+             move-class="slide-move"
              leave-active-class="slideXRightOut">
     <slot></slot>
   </component>
@@ -29,7 +26,8 @@
     }
   }
 </script>
-<style>
+<style lang="scss">
+  @import "move";
   @keyframes slideXRightIn {
     from {
       opacity: 0;

diff --git a/src/Slide/SlideYDownTransition.vue b/src/Slide/SlideYDownTransition.vue
@@ -1,11 +1,7 @@
 <template>
   <component :is="componentType"
              v-bind="$attrs"
-             v-on="$listeners"
-             @before-enter="beforeEnter"
-             @after-enter="cleanUpStyles"
-             @before-leave="beforeLeave"
-             @after-leave="cleanUpStyles"
+             v-on="hooks"
              enter-active-class="slideYDownIn"
              leave-active-class="slideYDownOut">
     <slot></slot>
@@ -29,7 +25,8 @@
     }
   }
 </script>
-<style>
+<style lang="scss">
+  @import "move";
   @keyframes slideYDownIn {
     from {
       opacity: 0;

diff --git a/src/Slide/SlideYUpTransition.vue b/src/Slide/SlideYUpTransition.vue
@@ -1,12 +1,10 @@
 <template>
   <component :is="componentType"
+             type="animation"
              v-bind="$attrs"
-             v-on="$listeners"
-             @before-enter="beforeEnter"
-             @after-enter="cleanUpStyles"
-             @before-leave="beforeLeave"
-             @after-leave="cleanUpStyles"
+             v-on="hooks"
              enter-active-class="slideYIn"
+             move-class="slide-move"
              leave-active-class="slideYOut">
     <slot></slot>
   </component>
@@ -29,7 +27,8 @@
     }
   }
 </script>
-<style>
+<style lang="scss">
+  @import "move";
   @keyframes slideYIn {
     from {
       opacity: 0;

diff --git a/src/Slide/move.scss b/src/Slide/move.scss
@@ -0,0 +1,3 @@
+.slide-move{
+  transition: transform .3s;
+}
diff --git a/src/Zoom/ZoomCenterTransition.vue b/src/Zoom/ZoomCenterTransition.vue
@@ -1,12 +1,9 @@
 <template>
   <component :is="componentType"
               v-bind="$attrs"
-              v-on="$listeners"
-              @before-enter="beforeEnter"
-              @after-enter="cleanUpStyles"
-              @before-leave="beforeLeave"
-              @after-leave="cleanUpStyles"
+              v-on="hooks"
               enter-active-class="zoomIn"
+              move-class="zoom-move"
               leave-active-class="zoomOut">
     <slot></slot>
   </component>
@@ -18,7 +15,8 @@
     mixins: [baseTransition]
   }
 </script>
-<style>
+<style lang="scss">
+  @import "move";
   @keyframes zoomIn {
     from {
       opacity: 0;

diff --git a/src/Zoom/ZoomUpTransition.vue b/src/Zoom/ZoomUpTransition.vue
@@ -1,13 +1,10 @@
 <template>
   <component :is="componentType"
-              v-bind="$attrs"
-              v-on="$listeners"
-              @before-enter="beforeEnter"
-              @after-enter="cleanUpStyles"
-              @before-leave="beforeLeave"
-              @after-leave="cleanUpStyles"
-              enter-active-class="zoomInUp"
-              leave-active-class="zoomOutUp">
+             v-bind="$attrs"
+             v-on="hooks"
+             enter-active-class="zoomInUp"
+             move-class="zoom-move"
+             leave-active-class="zoomOutUp">
     <slot></slot>
   </component>
 </template>
@@ -31,6 +28,7 @@
   }
 </script>
 <style lang="scss">
+  @import "move";
 
   @keyframes zoomInUp {
     from {

diff --git a/src/Zoom/ZoomXTransition.vue b/src/Zoom/ZoomXTransition.vue
@@ -1,13 +1,10 @@
 <template>
   <component :is="componentType"
-              v-bind="$attrs"
-              v-on="$listeners"
-              @before-enter="beforeEnter"
-              @after-enter="cleanUpStyles"
-              @before-leave="beforeLeave"
-              @after-leave="cleanUpStyles"
-              enter-active-class="zoomInX"
-              leave-active-class="zoomOutX">
+             v-bind="$attrs"
+             v-on="hooks"
+             enter-active-class="zoomInX"
+             move-class="zoom-move"
+             leave-active-class="zoomOutX">
     <slot></slot>
   </component>
 </template>
@@ -30,7 +27,9 @@
     mixins: [baseTransition]
   }
 </script>
-<style>
+<style lang="scss">
+  @import "move";
+
   @keyframes zoomInX {
     from {
       opacity: 0;

diff --git a/src/Zoom/ZoomYTransition.vue b/src/Zoom/ZoomYTransition.vue
@@ -1,13 +1,10 @@
 <template>
   <component :is="componentType"
-              v-bind="$attrs"
-              v-on="$listeners"
-              @before-enter="beforeEnter"
-              @after-enter="cleanUpStyles"
-              @before-leave="beforeLeave"
-              @after-leave="cleanUpStyles"
-              enter-active-class="zoomInY"
-              leave-active-class="zoomOutY">
+             v-bind="$attrs"
+             v-on="hooks"
+             enter-active-class="zoomInY"
+             move-class="zoom-move"
+             leave-active-class="zoomOutY">
     <slot></slot>
   </component>
 </template>
@@ -30,7 +27,9 @@
     },
   }
 </script>
-<style>
+<style lang="scss">
+  @import "move";
+
   @keyframes zoomInY {
     from {
       opacity: 0;

diff --git a/src/Zoom/move.scss b/src/Zoom/move.scss
@@ -0,0 +1,3 @@
+.zoom-move{
+  transition: transform .3s ease-out;
+}