@noction/vue-bezier 1.0.5

package/src/components/Collapse/CollapseTransition.vue

@@ -0,0 +1,122 @@
+<template>
+  <component
+    :is="componentType"
+    :tag="tag"
+    v-bind="{ ...$attrs, ...hooks }"
+    move-class="collapse-move"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { BaseTransitionProps } from 'vue'
+import {
+  buildComponentType,
+  buildEmits,
+  buildProps,
+  buildTag
+} from '../../composable'
+import { leave, setAbsolutePosition, setStyles } from '../../composable/buildHooks'
+
+const props = defineProps(buildProps())
+const emit = defineEmits(buildEmits())
+
+const componentType = buildComponentType(props)
+const tag = buildTag(props)
+
+const hooks: BaseTransitionProps = {
+  onAfterEnter (el) {
+    // for safari: remove class then reset height is necessary
+    el.style.transition = ''
+    el.style.height = ''
+    el.style.overflow = el.dataset.oldOverflow
+
+    emit('after-enter', el)
+  },
+  onAfterLeave (el) {
+    el.style.transition = ''
+    el.style.height = ''
+    el.style.overflow = el.dataset.oldOverflow
+    el.style.paddingTop = el.dataset.oldPaddingTop
+    el.style.paddingBottom = el.dataset.oldPaddingBottom
+
+    emit('after-leave', el)
+  },
+  onBeforeEnter (el) {
+    const enterDuration = props.duration?.enter ?? props.duration ?? 0
+
+    el.style.transition = transitionStyle(enterDuration)
+
+    if (!el.dataset) el.dataset = {}
+
+    el.dataset.oldPaddingTop = el.style.paddingTop
+    el.dataset.oldPaddingBottom = el.style.paddingBottom
+
+    el.style.height = '0'
+    el.style.paddingTop = 0
+    el.style.paddingBottom = 0
+
+    setStyles(props, el)
+
+    emit('before-enter', el)
+  },
+  onBeforeLeave (el) {
+    if (!el.dataset) el.dataset = {}
+
+    el.dataset.oldPaddingTop = el.style.paddingTop
+    el.dataset.oldPaddingBottom = el.style.paddingBottom
+    el.dataset.oldOverflow = el.style.overflow
+
+    el.style.height = `${el.scrollHeight}px`
+    el.style.overflow = 'hidden'
+
+    setStyles(props, el)
+
+    emit('before-leave', el)
+  },
+  onEnter (el) {
+    el.dataset.oldOverflow = el.style.overflow
+
+    if (el.scrollHeight !== 0) {
+      el.style.height = `${el.scrollHeight}px`
+      el.style.paddingTop = el.dataset.oldPaddingTop
+      el.style.paddingBottom = el.dataset.oldPaddingBottom
+    } else {
+      el.style.height = ''
+      el.style.paddingTop = el.dataset.oldPaddingTop
+      el.style.paddingBottom = el.dataset.oldPaddingBottom
+    }
+
+    el.style.overflow = 'hidden'
+  },
+  onLeave (el, done: () => void) {
+    const leaveDuration = props.duration.leave ?? props.duration ?? 0
+
+    if (el.scrollHeight !== 0) {
+      // for safari: add class after set height, or it will jump to zero height suddenly, weired
+      el.style.transition = transitionStyle(leaveDuration)
+      el.style.height = 0
+      el.style.paddingTop = 0
+      el.style.paddingBottom = 0
+    }
+
+    // necessary for transition-group
+    setAbsolutePosition(props, el)
+
+    leave(props, el, done)
+    emit('leave', el, done)
+  }
+}
+
+const transitionStyle = (duration: number) => {
+  const durationInSeconds = duration / 1000
+
+  return `${durationInSeconds}s height ease-in-out, ${durationInSeconds}s padding-top ease-in-out, ${durationInSeconds}s padding-bottom ease-in-out`
+}
+
+</script>
+
+<style>
+  .collapse-move { transition: transform .3s ease-in-out; }
+</style>

package/src/components/Fade/FadeTransition.vue

@@ -0,0 +1,52 @@
+<template>
+  <component
+    :is="componentType"
+    :tag="tag"
+    enter-active-class="fade-in"
+    move-class="fade-move"
+    leave-active-class="fade-out"
+    v-bind="{ ...$attrs, ...hooks }"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<script setup lang="ts">
+import {
+  buildComponentType,
+  buildEmits,
+  buildHooks,
+  buildProps,
+  buildTag
+} from '../../composable'
+
+const props = defineProps(buildProps())
+const emit = defineEmits(buildEmits())
+
+const componentType = buildComponentType(props)
+const tag = buildTag(props)
+const hooks = buildHooks(props, emit)
+
+</script>
+
+<style>
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes fade-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+
+  .fade-in { animation-name: fade-in; }
+  .fade-out { animation-name: fade-out; }
+  .fade-move { transition: transform .3s ease-out; }
+</style>

package/src/components/Scale/ScaleTransition.vue

@@ -0,0 +1,76 @@
+<template>
+  <component
+    :is="componentType"
+    :tag="tag"
+    v-bind="{ ...$attrs, ...hooks }"
+    enter-active-class="scale-in"
+    move-class="scale-move"
+    leave-active-class="scale-out"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts">
+export const customProps = {
+  origin: {
+    default: 'top left',
+    type: String
+  },
+  styles: {
+    default: () => {
+      return {
+        animationFillMode: 'both',
+        animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
+      }
+    },
+    type: Object
+  }
+}
+
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<script setup lang="ts">
+import {
+  buildComponentType,
+  buildEmits,
+  buildHooks,
+  buildProps,
+  buildTag
+} from '../../composable'
+
+const props = defineProps(buildProps(customProps))
+const emit = defineEmits(buildEmits())
+
+const componentType = buildComponentType(props)
+const tag = buildTag(props)
+const hooks = buildHooks(props, emit)
+
+</script>
+
+<style>
+  @keyframes scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0);
+    }
+
+    to { opacity: 1; }
+  }
+
+  @keyframes scale-out {
+    from { opacity: 1; }
+
+    to {
+      opacity: 0;
+      transform: scale(0);
+    }
+  }
+
+  .scale-in { animation-name: scale-in; }
+  .scale-out { animation-name: scale-out; }
+  .scale-move { transition: transform .3s cubic-bezier(.25, .8, .5, 1); }
+</style>

package/src/components/Slide/SlideXLeftTransition.vue

@@ -0,0 +1,73 @@
+<template>
+  <component
+    :is="componentType"
+    :tag="tag"
+    v-bind="{ ...$attrs, ...hooks }"
+    enter-active-class="slide-x-left-in"
+    move-class="slide-move"
+    leave-active-class="slide-x-left-out"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts">
+export const customProps = {
+  styles: {
+    default: () => {
+      return {
+        animationFillMode: 'both',
+        animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
+      }
+    },
+    type: Object
+  }
+}
+
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<script setup lang="ts">
+import {
+  buildComponentType,
+  buildEmits,
+  buildHooks,
+  buildProps,
+  buildTag
+} from '../../composable'
+
+const props = defineProps(buildProps(customProps))
+const emit = defineEmits(buildEmits())
+
+const componentType = buildComponentType(props)
+const tag = buildTag(props)
+const hooks = buildHooks(props, emit)
+
+</script>
+
+<style lang="scss">
+  @import 'move';
+
+  @keyframes slide-x-left-in {
+    from {
+      opacity: 0;
+      transform: translateX(-15px);
+    }
+
+    to { opacity: 1; }
+  }
+
+  @keyframes slide-x-left-out {
+    from { opacity: 1; }
+
+    to {
+      opacity: 0;
+      transform: translateX(-15px);
+    }
+  }
+
+  .slide-x-left-in { animation-name: slide-x-left-in; }
+  .slide-x-left-out { animation-name: slide-x-left-out; }
+</style>

package/src/components/Slide/SlideXRightTransition.vue

@@ -0,0 +1,73 @@
+<template>
+  <component
+    :is="componentType"
+    :tag="tag"
+    v-bind="{ ...$attrs, ...hooks }"
+    enter-active-class="slide-x-right-in"
+    move-class="slide-move"
+    leave-active-class="slide-x-right-out"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts">
+export const customProps = {
+  styles: {
+    default: () => {
+      return {
+        animationFillMode: 'both',
+        animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
+      }
+    },
+    type: Object
+  }
+}
+
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<script setup lang="ts">
+import {
+  buildComponentType,
+  buildEmits,
+  buildHooks,
+  buildProps,
+  buildTag
+} from '../../composable'
+
+const props = defineProps(buildProps(customProps))
+const emit = defineEmits(buildEmits())
+
+const componentType = buildComponentType(props)
+const tag = buildTag(props)
+const hooks = buildHooks(props, emit)
+
+</script>
+
+<style lang="scss">
+  @import 'move';
+
+  @keyframes slide-x-right-in {
+    from {
+      opacity: 0;
+      transform: translateX(15px);
+    }
+
+    to { opacity: 1; }
+  }
+
+  @keyframes slide-x-right-out {
+    from { opacity: 1; }
+
+    to {
+      opacity: 0;
+      transform: translateX(15px);
+    }
+  }
+
+  .slide-x-right-in { animation-name: slide-x-right-in; }
+  .slide-x-right-out { animation-name: slide-x-right-out; }
+</style>

package/src/components/Slide/SlideYDownTransition.vue

@@ -0,0 +1,72 @@
+<template>
+  <component
+    :is="componentType"
+    :tag="tag"
+    v-bind="{ ...$attrs, ...hooks }"
+    enter-active-class="slide-y-down-in"
+    leave-active-class="slide-y-down-out"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts">
+export const customProps = {
+  styles: {
+    default: () => {
+      return {
+        animationFillMode: 'both',
+        animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
+      }
+    },
+    type: Object
+  }
+}
+
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<script setup lang="ts">
+import {
+  buildComponentType,
+  buildEmits,
+  buildHooks,
+  buildProps,
+  buildTag
+} from '../../composable'
+
+const props = defineProps(buildProps(customProps))
+const emit = defineEmits(buildEmits())
+
+const componentType = buildComponentType(props)
+const tag = buildTag(props)
+const hooks = buildHooks(props, emit)
+
+</script>
+
+<style lang="scss">
+  @import 'move';
+
+  @keyframes slide-y-down-in {
+    from {
+      opacity: 0;
+      transform: translateY(15px);
+    }
+
+    to { opacity: 1; }
+  }
+
+  @keyframes slide-y-down-out {
+    from { opacity: 1; }
+
+    to {
+      opacity: 0;
+      transform: translateY(15px);
+    }
+  }
+
+  .slide-y-down-in { animation-name: slide-y-down-in; }
+  .slide-y-down-out { animation-name: slide-y-down-out; }
+</style>

package/src/components/Slide/SlideYUpTransition.vue

@@ -0,0 +1,74 @@
+<template>
+  <component
+    :is="componentType"
+    :tag="tag"
+    type="animation"
+    v-bind="{ ...$attrs, ...hooks }"
+    enter-active-class="slide-y-in"
+    move-class="slide-move"
+    leave-active-class="slide-y-out"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts">
+export const customProps = {
+  styles: {
+    default: () => {
+      return {
+        animationFillMode: 'both',
+        animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
+      }
+    },
+    type: Object
+  }
+}
+
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<script setup lang="ts">
+import {
+  buildComponentType,
+  buildEmits,
+  buildHooks,
+  buildProps,
+  buildTag
+} from '../../composable'
+
+const props = defineProps(buildProps(customProps))
+const emit = defineEmits(buildEmits())
+
+const componentType = buildComponentType(props)
+const tag = buildTag(props)
+const hooks = buildHooks(props, emit)
+
+</script>
+
+<style lang="scss">
+  @import 'move';
+
+  @keyframes slide-y-in {
+    from {
+      opacity: 0;
+      transform: translateY(-15px);
+    }
+
+    to { opacity: 1; }
+  }
+
+  @keyframes slide-y-out {
+    from { opacity: 1; }
+
+    to {
+      opacity: 0;
+      transform: translateY(-15px);
+    }
+  }
+
+  .slide-y-in { animation-name: slide-y-in; }
+  .slide-y-out { animation-name: slide-y-out; }
+</style>

package/src/components/Slide/move.scss

@@ -0,0 +1 @@
+.slide-move { transition: transform .3s; }

package/src/components/Zoom/ZoomCenterTransition.vue

@@ -0,0 +1,63 @@
+<template>
+  <component
+    :is="componentType"
+    :tag="tag"
+    v-bind="{ ...$attrs, ...hooks }"
+    enter-active-class="zoom-in"
+    move-class="zoom-move"
+    leave-active-class="zoom-out"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<script setup lang="ts">
+import {
+  buildComponentType,
+  buildEmits,
+  buildHooks,
+  buildProps,
+  buildTag
+} from '../../composable'
+
+const props = defineProps(buildProps())
+const emit = defineEmits(buildEmits())
+
+const componentType = buildComponentType(props)
+const tag = buildTag(props)
+const hooks = buildHooks(props, emit)
+
+</script>
+
+<style lang="scss">
+  @import 'move';
+
+  @keyframes zoom-in {
+    0% {
+      opacity: 0;
+      transform: scale3d(.3, .3, .3);
+    }
+
+    50% { opacity: 1; }
+  }
+
+  @keyframes zoom-out {
+    0% { opacity: 1; }
+
+    50% {
+      opacity: 0;
+      transform: scale3d(.3, .3, .3);
+    }
+
+    100% { opacity: 0; }
+  }
+
+  .zoom-in { animation-name: zoom-in; }
+  .zoom-out { animation-name: zoom-out; }
+</style>

package/src/components/Zoom/ZoomUpTransition.vue

@@ -0,0 +1,75 @@
+<template>
+  <component
+    :is="componentType"
+    :tag="tag"
+    v-bind="{ ...$attrs, ...hooks }"
+    enter-active-class="zoom-in-up"
+    move-class="zoom-move"
+    leave-active-class="zoom-out-up"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts">
+export const customProps = {
+  styles: {
+    default: () => {
+      return {
+        animationFillMode: 'both',
+        animationTimingFunction: 'ease-out'
+      }
+    },
+    type: Object
+  }
+}
+
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<script setup lang="ts">
+import {
+  buildComponentType,
+  buildEmits,
+  buildHooks,
+  buildProps,
+  buildTag
+} from '../../composable'
+
+const props = defineProps(buildProps(customProps))
+const emit = defineEmits(buildEmits())
+
+const componentType = buildComponentType(props)
+const tag = buildTag(props)
+const hooks = buildHooks(props, emit)
+
+</script>
+
+<style lang="scss">
+  @import 'move';
+
+  @keyframes zoom-in-up {
+    0% {
+      opacity: 0;
+      transform: scaleY(0);
+      transform-origin: top center;
+    }
+
+    50% { opacity: 1; }
+
+    100% { transform: scaleY(1); }
+  }
+
+  @keyframes zoom-out-up {
+    0% { opacity: 1; }
+
+    50% { transform: scaleY(0); }
+
+    100% { opacity: 0; }
+  }
+
+  .zoom-in-up { animation-name: zoom-in-up; }
+  .zoom-out-up { animation-name: zoom-out-up; }
+</style>