Add Scale, Slide transitions

Add origin prop

README.md

@@ -64,6 +64,11 @@ Vue.use(Transitions)
 - ZoomYTransition
 - ZoomUpTransition
 - CollapseTransition
+- ScaleTransition
+- SlideXLeftTransition
+- SlideXRightTransition
+- SlideXUpTransition
+- SlideXDownTransition
 
 ## Props 
 ```js
@@ -75,26 +80,37 @@ props: {
   duration: {
     type: [Number, Object],
     default: 300
-  },
+  },  
   /**
    * Whether the component should be a `transition-group` component.
    */
   group: Boolean,
+  /**
+   *  Transform origin property https://tympanus.net/codrops/css_reference/transform-origin/.
+   *  Can be specified with styles as well but it's shorter with this prop
+   */
+  origin: {
+    type: String,
+    default: ''
+  },
   /**
    * Element styles that are applied during transition. These styles are applied on @beforeEnter and @beforeLeave hooks
    */
   styles: {
     type: Object,
     default: () => {
       return {
-        animationFillMode: 'both',
+        animationFillMode: 'both',  
         animationTimingFunction: 'ease-out'
       }
     }
   }
 }
 ```
 
+Besides the properties described above, you can pass in any other [Transition props or events](https://vuejs.org/v2/api/#transition)
+**Note** Overriding hooks (especially `beforeEnter` or `beforeLeave`) may cause unwanted effects.
+
 ## License
 
 MIT © [cristij](https://github.com/cristij)

example/App.vue

@@ -137,6 +137,14 @@
           {
             label: 'Collapse',
             options: ['CollapseTransition']
+          },
+          {
+            label: 'Scale',
+            options: ['ScaleTransition']
+          },
+          {
+            label: 'Slide',
+            options: ['SlideYUpTransition', 'SlideYDownTransition', 'SlideXLeftTransition', 'SlideXRightTransition']
           }
         ],
         transitions: ['FadeTransition', 'ZoomCenterTransition', 'ZoomXTransition', 'ZoomYTransition', 'CollapseTransition'],

src/Scale/ScaleTransition.vue

@@ -0,0 +1,65 @@
+<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="scaleIn"
+             leave-active-class="scaleOut">
+    <slot></slot>
+  </component>
+</template>
+<script>
+  import {baseTransition} from '../mixins/index.js'
+  export default {
+    name: 'scale-transition',
+    mixins: [baseTransition],
+    props: {
+      origin: {
+        type: String,
+        default: 'top left'
+      },
+      styles: {
+        type: Object,
+        default: () => {
+          return {
+            animationFillMode: 'both',
+            animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
+          }
+        }
+      }
+    }
+  }
+</script>
+<style>
+  @keyframes scaleIn {
+    from {
+      opacity: 0;
+      transform: scale(0)
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .scaleIn {
+    animation-name: scaleIn;
+  }
+  @keyframes scaleOut {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(0);
+    }
+  }
+
+  .scaleOut {
+    animation-name: scaleOut;
+  }
+</style>

src/Slide/SlideXLeftTransition.vue

@@ -0,0 +1,61 @@
+<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="slideXLeftIn"
+             leave-active-class="slideXLeftOut">
+    <slot></slot>
+  </component>
+</template>
+<script>
+  import {baseTransition} from '../mixins/index.js'
+  export default {
+    name: 'slide-x-left-transition',
+    mixins: [baseTransition],
+    props: {
+      styles: {
+        type: Object,
+        default: () => {
+          return {
+            animationFillMode: 'both',
+            animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
+          }
+        }
+      }
+    }
+  }
+</script>
+<style>
+  @keyframes slideXLeftIn {
+    from {
+      opacity: 0;
+      transform: translateX(-15px);
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .slideXLeftIn {
+    animation-name: slideXLeftIn;
+  }
+  @keyframes slideXLeftOut {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(-15px);
+    }
+  }
+
+  .slideXLeftOut {
+    animation-name: slideXLeftOut;
+  }
+</style>

src/Slide/SlideXRightTransition.vue

@@ -0,0 +1,61 @@
+<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="slideXRightIn"
+             leave-active-class="slideXRightOut">
+    <slot></slot>
+  </component>
+</template>
+<script>
+  import {baseTransition} from '../mixins/index.js'
+  export default {
+    name: 'slide-x-right-transition',
+    mixins: [baseTransition],
+    props: {
+      styles: {
+        type: Object,
+        default: () => {
+          return {
+            animationFillMode: 'both',
+            animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
+          }
+        }
+      }
+    }
+  }
+</script>
+<style>
+  @keyframes slideXRightIn {
+    from {
+      opacity: 0;
+      transform: translateX(15px);
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .slideXRightIn {
+    animation-name: slideXRightIn;
+  }
+  @keyframes slideXRightOut {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(15px);
+    }
+  }
+
+  .slideXRightOut {
+    animation-name: slideXRightOut;
+  }
+</style>

src/Slide/SlideYDownTransition.vue

@@ -0,0 +1,61 @@
+<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="slideYDownIn"
+             leave-active-class="slideYDownOut">
+    <slot></slot>
+  </component>
+</template>
+<script>
+  import {baseTransition} from '../mixins/index.js'
+  export default {
+    name: 'slide-y-down-transition',
+    mixins: [baseTransition],
+    props: {
+      styles: {
+        type: Object,
+        default: () => {
+          return {
+            animationFillMode: 'both',
+            animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
+          }
+        }
+      }
+    }
+  }
+</script>
+<style>
+  @keyframes slideYDownIn {
+    from {
+      opacity: 0;
+      transform: translateY(15px);
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .slideYDownIn {
+    animation-name: slideYDownIn;
+  }
+  @keyframes slideYDownOut {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(15px);
+    }
+  }
+
+  .slideYDownOut {
+    animation-name: slideYDownOut;
+  }
+</style>

src/Slide/SlideYUpTransition.vue

@@ -0,0 +1,61 @@
+<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="slideYIn"
+             leave-active-class="slideYOut">
+    <slot></slot>
+  </component>
+</template>
+<script>
+  import {baseTransition} from '../mixins/index.js'
+  export default {
+    name: 'slide-y-up-transition',
+    mixins: [baseTransition],
+    props: {
+      styles: {
+        type: Object,
+        default: () => {
+          return {
+            animationFillMode: 'both',
+            animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
+          }
+        }
+      }
+    }
+  }
+</script>
+<style>
+  @keyframes slideYIn {
+    from {
+      opacity: 0;
+      transform: translateY(-15px);
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .slideYIn {
+    animation-name: slideYIn;
+  }
+  @keyframes slideYOut {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(-15px);
+    }
+  }
+
+  .slideYOut {
+    animation-name: slideYOut;
+  }
+</style>