Merge pull request #15 from VanishMax/improvement/transition

Improve transitions

Author: VanishMax

src/docs/containers/Modals.vue

@@ -2,25 +2,29 @@
   <section class="w-full rounded shadow-lg p-4">
     <h2 class="text-xl mb-2">Modal window</h2>
     <Button @click.native="open = true" is:primary>Open simple modal</Button>
-    <Button
-      @click.native="open1 = true"
-      is:danger
-      class="mt-4"
-    >
+    <Button @click.native="open1 = true" is:primary class="mt-4">
+      Open high-transitioned modal
+    </Button>
+    <Button @click.native="open2 = true" is:danger class="mt-4">
       Open destroyable non-closable modal
     </Button>
 
+    <Modal v-model="open">
+      <h2>Simple modal</h2>
+    </Modal>
+
     <Modal
-      v-model="open"
-      :transition-options="{animation: animationOptions}"
+      v-model="open1"
+      :transition-props="{animation: animationOptions}"
+      transition="blur"
     >
       <template #default="{close}">
-        <h2>Hello, world</h2>
+        <h2>High-transitioned modal</h2>
         <Button @click.native="close" is:danger>Close modal</Button>
       </template>
     </Modal>
 
-    <Modal v-model="open1" destroyable non-closable>
+    <Modal v-model="open2" destroyable non-closable>
       <template #default="{close}">
         <Counter :close="close" />
       </template>
@@ -41,6 +45,7 @@
       return {
         open: false,
         open1: false,
+        open2: false,
         animationOptions: {
           delay: 300,
           duration: 1000,

src/docs/containers/Transitions.vue

@@ -0,0 +1,39 @@
+<template>
+  <section class="w-full rounded shadow-lg p-4">
+    <h2 class="text-xl mb-2">Transition</h2>
+    <Toggle v-model="shown" />
+    <Transition name="fade" appear mode="out-in">
+      <Button v-if="shown" key="on" is:primary>Hello</Button>
+      <Button v-else key="off" is:danger>Good bye</Button>
+    </Transition>
+
+    <br>
+    <br class="mt-4">
+    <Toggle v-model="shown1" />
+    <Transition name="slide" appear :animation="{easing: 'easeInOutBack', duration: 500}">
+      <Button v-if="shown1" key="on" is:primary>Slide with easeInOutBack easing</Button>
+    </Transition>
+  </section>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  import Button from '@/lib/components/Button.vue';
+  import Transition from '@/lib/components/Transition.vue';
+  import Toggle from '@/lib/components/Toggle.vue';
+
+  export default Vue.extend({
+    name: 'Radios',
+    components: {
+      Button,
+      Transition,
+      Toggle,
+    },
+    data () {
+      return {
+        shown: true,
+        shown1: true,
+      };
+    },
+  });
+</script>

src/docs/views/index.vue

@@ -24,6 +24,9 @@
     <div class="w-full">
       <Toggles />
     </div>
+    <div class="w-full">
+      <Transitions />
+    </div>
   </div>
 </template>
 
@@ -37,6 +40,7 @@
   import Modals from '../containers/Modals.vue';
   import Tabs from '../containers/Tabs.vue';
   import Toggles from '../containers/Toggles.vue';
+  import Transitions from '../containers/Transitions.vue';
 
   export default Vue.extend({
     name: 'Home',
@@ -49,6 +53,7 @@
       Modals,
       Tabs,
       Toggles,
+      Transitions,
     },
   });
 </script>

src/lib/components/Dropdown.vue

@@ -20,7 +20,7 @@
         :value="val"
       />
     </div>
-    <Transition :name="transitionName" :options="transitionOptions">
+    <Transition :name="transitionName" v-bind="transitionProps">
       <div v-show="val" v-check-position="{position, positionRelative}" :class="dropdownClasses">
         <slot :open="open" :close="close" :value="val" />
       </div>
@@ -113,7 +113,7 @@
       },
 
       transition: String,
-      transitionOptions: Object as PropType<TransitionOptions>,
+      transitionProps: Object as PropType<TransitionOptions>,
     },
     data () {
       return {

src/lib/components/Modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Transition :name="transitionName" :options="transitionOptions">
+  <Transition :name="transitionName" v-bind="transitionProps">
     <dialog
       v-show="val"
       :class="overlayClasses"
@@ -64,7 +64,7 @@
       bodyClass: String,
 
       transition: String,
-      transitionOptions: Object as PropType<TransitionOptions>,
+      transitionProps: Object as PropType<TransitionOptions>,
     },
     data () {
       return {
@@ -118,8 +118,8 @@
         }
       },
       bodyClasses (val: string|null) {
-        if (val && typeof window !== 'undefined') {
-          document.body.setAttribute('class', composeClasses(this.body, val) || '');
+        if (typeof window !== 'undefined') {
+          document.body.setAttribute('class', composeClasses(this.body, val || '') || '');
         }
       },
     },

src/lib/components/Transition.vue

@@ -10,10 +10,10 @@
 
 <script lang="ts">
   import Vue, {PropType} from 'vue';
-  import {TransitionOptions} from '@/lib/types';
+  import {AnimationOptions, TransitionOptions} from '@/lib/types';
 
   interface TransitionType extends Partial<TransitionOptions> {
-    name: 'fade'|string|null,
+    name: 'fade'|'blur'|'scale'|'slide'|'fly'|string|null,
     hooks?: any,
     options: {
       appear?: boolean,
@@ -30,7 +30,31 @@
         default: null,
       },
 
-      options: Object as PropType<TransitionOptions>,
+      /**
+       * Following properties are well-explained in the official Vue documentation:
+       * https://vuejs.org/v2/guide/transitions.html#Transition-Modes
+       *
+       * Shortly:
+       * * Appear – show transition on initial Transition mount
+       * * Mode – how to switch between if-else_if-else components. Supported: in-out, out-in
+       */
+      appear: {
+        type: Boolean,
+        default: false,
+      },
+      mode: {
+        type: String as PropType<'in-out'|'out-in'|null>,
+        default: null,
+      },
+
+      /**
+       * Animation object to configure such properties as:
+       * delay, duration, type (only in or only out), easing etc.
+       */
+      animation: {
+        type: Object as PropType<AnimationOptions>,
+        default: null,
+      },
     },
     computed: {
       transition (): TransitionType {
@@ -47,15 +71,19 @@
         } else {
           return {
             ...transition,
-            animation: this.options?.animation || transition.animation,
+            animation: {...transition.animation, ...this.animation},
             options: {
-              appear: !!this.options?.appear,
-              mode: this.options?.mode || null,
-              css: !this.options?.animation,
+              appear: this.appear,
+              mode: this.mode || null,
+              css: !this.animation,
             },
           };
         }
       },
+
+      /**
+       * Transition hooks are JS-functions that are mapped as events. They draw the animation
+       */
       hooks () {
         const hooks = this.transition?.hooks;
         const newHooks: any = {};

src/lib/config.ts

@@ -2,7 +2,7 @@
  * Default IUI configuration. Read more about it here: https://industrial-ui.com/docs/configuration
  */
 import { Config } from './types';
-import transitions from './utils/transitions';
+import transitions from './transitions';
 
 const config: Config = {
   stylesheets: [],

src/lib/utils/animate.ts src/lib/transitions/animate.tssrc/lib/utils/animate.ts renamed to src/lib/transitions/animate.ts

@@ -1,3 +1,8 @@
+import {EasingFunction, Easings} from '@/lib/types';
+import easings from '@/lib/transitions/easings';
+
+const isString = (str: any): str is string => typeof str === 'string';
+
 const animate = ({
   easing,
   draw,
@@ -6,7 +11,7 @@ const animate = ({
 }: {
   duration: number,
   draw: (fraction: number) => void,
-  easing?: (fraction: number) => number,
+  easing?: Extract<keyof Easings, string> | EasingFunction,
   callback?: () => void,
 }) => {
   const start = performance.now();
@@ -17,7 +22,11 @@ const animate = ({
     if (timeFraction > 1) timeFraction = 1;
 
     // calculate the current animation state with timing function: linear, ease-in, ease-out etc
-    const progress = easing ? easing(timeFraction) : timeFraction;
+    let progress = timeFraction;
+    if (easing) {
+      if (isString(easing)) progress = easings[easing]?.(timeFraction) || timeFraction;
+      else progress = easing(timeFraction) || timeFraction;
+    }
 
     draw(progress);
 

src/lib/transitions/blur.ts

@@ -0,0 +1,56 @@
+import {Transition} from '@/lib/types';
+import tick from '@/lib/transitions/hook';
+
+const blurTransition: Transition = {
+  name: 'blur',
+
+  // Animation object goes straight to hook functions as argument
+  animation: {
+    delay: 0,
+    duration: 300,
+    type: 'both',
+    amount: 5,
+  },
+
+  hooks: {
+    beforeEnter ({el}) {
+      el.style.filter = 'initial';
+      el.style.opacity = '0';
+    },
+
+    enter({el, done}, animation) {
+      if (animation.type === 'both' || animation.type === 'only-in') {
+        tick({...animation, done}, (fraction) => {
+          el.style.opacity = fraction.toString();
+          el.style.filter = `blur(${(1 - fraction) * animation.amount}px)`;
+        });
+      } else done();
+    },
+
+    afterEnter ({el}) {
+      el.style.opacity = '1';
+      el.style.filter = 'inherit';
+    },
+
+    beforeLeave ({el}) {
+      el.style.filter = 'initial';
+      el.style.opacity = '1';
+    },
+
+    leave ({el, done}, animation) {
+      if (animation.type === 'both' || animation.type === 'only-out') {
+        tick({...animation, done}, (fraction) => {
+          el.style.opacity = (1 - fraction).toString();
+          el.style.filter = `blur(${fraction * animation.amount}px)`;
+        });
+      } else done();
+    },
+
+    afterLeave ({el}) {
+      el.style.filter = 'initial';
+      el.style.opacity = '0';
+    },
+  },
+};
+
+export default blurTransition;

src/lib/transitions/easings.ts

@@ -0,0 +1,20 @@
+import {Easings} from '@/lib/types';
+
+const easings: Easings = {
+  linear: (x: number) => x,
+  easeIn: (x: number) => 1 - Math.cos((x * Math.PI) / 2),
+  easeOut: (x: number) => Math.sin((x * Math.PI) / 2),
+  easeInOut: (x: number) => -(Math.cos(Math.PI * x) - 1) / 2,
+  easeInBack: (x: number) => 2.70158 * x ** 3 - 1.70158 * x * x,
+  easeOutBack: (x: number) => 1 + 2.70158 * (x - 1) ** 3 + 1.70158 * (x - 1) ** 2,
+  easeInOutBack: (x: number) => {
+    const c1 = 1.70158;
+    const c2 = c1 * 1.525;
+
+    return x < 0.5
+      ? ((2 * x) ** 2 * ((c2 + 1) * 2 * x - c2)) / 2
+      : ((2 * x - 2) ** 2 * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
+  },
+};
+
+export default easings;