Transitions Config Module

The Transitions Config Module holds your application's default/prototypal Tailwind CSS classes for CSS transitions throughout your application.

app.vv.ts Use

You'll usually work with the Transitions Config Module after it's already been merged into VueVentus VvConfig data.

Here's what that generally looks like in practice in a real world app context:

javascript

// ./src/app.vv.ts

import { VvConfig } from '@obewds/vueventus'
import type { ConfigVv } from '@obewds/vueventus'

let appVv: ConfigVv = VvConfig

appVv.transitions.someProperty = 'some-value'

// ...

export default appVv

Import

However, if you need to import the compiled library version of the Transitions Config Module, you can use:

javascript

import { Transitions } from '@obewds/vueventus'

Transitions.durations

Type: Object

Transitions.durations Properties	Transitions.durations Prop Values
`"1200"`	`"duration-1200"`
`"1150"`	`"duration-1150"`
`"1100"`	`"duration-1100"`
`"1050"`	`"duration-1050"`
`"1000"`	`"duration-1000"`
`"950"`	`"duration-950"`
`"900"`	`"duration-900"`
`"850"`	`"duration-850"`
`"800"`	`"duration-800"`
`"750"`	`"duration-750"`
`"700"`	`"duration-700"`
`"650"`	`"duration-650"`
`"600"`	`"duration-600"`
`"550"`	`"duration-550"`
`"500"`	`"duration-500"`
`"475"`	`"duration-475"`
`"450"`	`"duration-450"`
`"425"`	`"duration-425"`
`"400"`	`"duration-400"`
`"375"`	`"duration-375"`
`"350"`	`"duration-350"`
`"325"`	`"duration-325"`
`"300"`	`"duration-300"`
`"275"`	`"duration-275"`
`"250"`	`"duration-250"`
`"225"`	`"duration-225"`
`"200"`	`"duration-200"`
`"175"`	`"duration-175"`
`"150"`	`"duration-150"`
`"125"`	`"duration-125"`
`"100"`	`"duration-100"`
`"75"`	`"duration-75"`
`"50"`	`"duration-50"`
`"25"`	`"duration-25"`

Examples

javascript

// ./src/app.vv.ts
appVv.transitions.durations = {
    '1200': '',
    '1150': '',
    '1100': '',
    '1050': '',
    '1000': '',
     '950': '',
     '900': '',
     '850': '',
     '800': '',
     '750': '',
     '700': '',
     '650': '',
     '600': '',
     '550': '',
     '500': '',
     '475': '',
     '450': '',
     '425': '',
     '400': '',
     '375': '',
     '350': '',
     '325': '',
     '300': '',
     '275': '',
     '250': '',
     '225': '',
     '200': '',
     '175': '',
     '150': '',
     '125': '',
     '100': '',
      '75': '',
      '50': '',
      '25': '',
}

javascript

// ./src/app.vv.ts
appVv.transitions.durations['1200'] = ''
appVv.transitions.durations['1150'] = ''
appVv.transitions.durations['1100'] = ''
appVv.transitions.durations['1050'] = ''
appVv.transitions.durations['1000'] = ''
appVv.transitions.durations['950']  = ''
appVv.transitions.durations['900']  = ''
appVv.transitions.durations['850']  = ''
appVv.transitions.durations['800']  = ''
appVv.transitions.durations['750']  = ''
appVv.transitions.durations['700']  = ''
appVv.transitions.durations['650']  = ''
appVv.transitions.durations['600']  = ''
appVv.transitions.durations['550']  = ''
appVv.transitions.durations['500']  = ''
appVv.transitions.durations['475']  = ''
appVv.transitions.durations['450']  = ''
appVv.transitions.durations['425']  = ''
appVv.transitions.durations['400']  = ''
appVv.transitions.durations['375']  = ''
appVv.transitions.durations['350']  = ''
appVv.transitions.durations['325']  = ''
appVv.transitions.durations['300']  = ''
appVv.transitions.durations['275']  = ''
appVv.transitions.durations['250']  = ''
appVv.transitions.durations['225']  = ''
appVv.transitions.durations['200']  = ''
appVv.transitions.durations['175']  = ''
appVv.transitions.durations['150']  = ''
appVv.transitions.durations['125']  = ''
appVv.transitions.durations['100']  = ''
appVv.transitions.durations['75']   = ''
appVv.transitions.durations['50']   = ''
appVv.transitions.durations['25']   = ''

Transitions.easings

Type: Object

Transitions.easings Properties	Transitions.easings Prop Values
`"linear"`	`"ease-linear"`
`"in"`	`"ease-in"`
`"out"`	`"ease-out"`
`"inOut"`	`"ease-in-out"`

Examples

javascript

// ./src/app.vv.ts
appVv.transitions.easings = {
    'linear': '',
        'in': '',
       'out': '',
     'inOut': '',
}

javascript

// ./src/app.vv.ts
appVv.transitions.easings.linear = ''
appVv.transitions.easings.in     = ''
appVv.transitions.easings.out    = ''
appVv.transitions.easings.inOut  = ''

Transitions.transitions

Type: Object

Transitions.transitions Properties	Transitions.transitions Prop Values
`"default"`	`"transition"`
`"all"`	`"transition-all"`
`"colors"`	`"transition-colors"`
`"none"`	`"transition-none"`
`"opacity"`	`"transition-opacity"`
`"shadow"`	`"transition-shadow"`
`"transform"`	`"transition-transform"`

Examples

javascript

// ./src/app.vv.ts
appVv.transitions.transitions = {
      'default': '',
          'all': '',
       'colors': '',
         'none': '',
      'opacity': '',
       'shadow': '',
    'transform': '',
}

javascript

// ./src/app.vv.ts
appVv.transitions.transitions.default   = ''
appVv.transitions.transitions.all       = ''
appVv.transitions.transitions.colors    = ''
appVv.transitions.transitions.none      = ''
appVv.transitions.transitions.opacity   = ''
appVv.transitions.transitions.shadow    = ''
appVv.transitions.transitions.transform = ''

Transitions.classes()

Returns: String
Default: "transition ease-in-out duration-300"

The Transitions.classes() method returns a joined String of the atomic classes within the various base properties of the Transitions Config Module object using the Transitions.getTransitionClasses(), Transitions.getEasingClasses(), and Transitions.getDurationClasses() methods under the hood.

Arguments

Args	Type	Status	Description
transitionsKey	`String`	Optional	Property name/key of a Transitions.transitions object
easingsKey	`String`	Optional	Property name/key of a Transitions.easings object
durationsKey	`String`	Optional	Property name/key of a Transitions.durations object

The applicable values for the transitionsKey argument are set via the Transitions.transitions property names/keys and atomic class values.

The applicable values for the easingsKey argument are set via the Transitions.easings property names/keys and atomic class values.

The applicable values for the durationsKey argument are set via the Transitions.durations property names/keys and atomic class values.

Examples

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <button :class="appVv.transitions.classes()">
        Default Transition
    </button>

    <button :class="appVv.transitions.classes('colors', 'linear', '1000')">
        Linear Color Transition
    </button>

</template>

Transitions.custom()

Returns: String
Default: "transition ease-in-out duration-300"

The Transitions.custom() method is essentially a more verbose and declarative version of the Transitions.classes() method, which also returns a joined String of the atomic classes within the various base properties of the Transitions Config Module object using the Transitions.getTransitionClasses(), Transitions.getEasingClasses(), and Transitions.getDurationClasses() methods under the hood.

Arguments

Args	Type	Status	Description
object	`Object`	Required	A settings parameter object
object.transitions	`String`	Optional	Property name/key of a Transitions.transitions object
object.easings	`String`	Optional	Property name/key of a Transitions.easings object
object.durations	`String`	Optional	Property name/key of a Transitions.durations object

The applicable values for the object.transitions settings object property are set via the Transitions.transitions property names/keys and atomic class values.

The applicable values for the object.easings settings object property are set via the Transitions.easings property names/keys and atomic class values.

The applicable values for the object.durations settings object property are set via the Transitions.durations property names/keys and atomic class values.

Examples

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <button :class="appVv.transitions.custom()">
        Default Transition
    </button>

    <button :class="appVv.transitions.custom({
        transitions: 'colors',
        easings: 'linear',
        durations: '1000'
    })">
        Linear Color Transition
    </button>

</template>

Transitions.getDurationClasses()

Returns: String
Default: "duration-300"

The Transitions.getDurationClasses() method returns transition duration classes based on the optional argument value passed into the method. These duration related classes come from the Transitions.durations object property names/keys and values (of atomic classes).

Arguments

Args	Type	Status	Description
durationsKey	`String`	Optional	Property name/key of an Transitions.durations object

The applicable values for the durationsKey argument are set via the Transitions.durations property names/keys and atomic class values.

Examples

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <button :class="appVv.transitions.getDurationClasses()">
        300ms Default Duration
    </button>

    <button :class="appVv.transitions.getDurationClasses('1000')">
       1000ms Duration
    </button>

</template>

Transitions.getEasingClasses()

Returns: String
Default: "ease-in-out"

The Transitions.getEasingClasses() method returns transition duration classes based on the optional argument value passed into the method. These duration related classes come from the Transitions.easings object property names/keys and values (of atomic classes).

Arguments

Args	Type	Status	Description
easingsKey	`String`	Optional	Property name/key of an Transitions.easings object

The applicable values for the easingsKey argument are set via the Transitions.easings property names/keys and atomic class values.

Examples

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <button :class="appVv.transitions.getEasingClasses()">
        Ease-In-Out Default Easing
    </button>

    <button :class="appVv.transitions.getEasingClasses('in')">
       Ease-In Easing
    </button>

</template>

Transitions.getTransitionClasses()

Returns: String
Default: "transition"

The Transitions.getTransitionClasses() method returns transition duration classes based on the optional argument value passed into the method. These duration related classes come from the Transitions.transitions object property names/keys and values (of atomic classes).

Arguments

Args	Type	Status	Description
transitionsKey	`String`	Optional	Property name/key of an Transitions.transitions object

The applicable values for the transitionsKey argument are set via the Transitions.transitions property names/keys and atomic class values.

Examples

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <button :class="appVv.transitions.getTransitionClasses()">
        Default Transition Type
    </button>

    <button :class="appVv.transitions.getTransitionClasses('colors')">
       Transition Colors
    </button>

</template>

Module Code

// ./src/configs/Transitions.ts

import type { ConfigTransitions } from '../types/ConfigTransitions'

export default <ConfigTransitions>{
    durations: {
        '1200': 'duration-1200',
        '1150': 'duration-1150',
        '1100': 'duration-1100',
        '1050': 'duration-1050',
        '1000': 'duration-1000',
        '950': 'duration-950',
        '900': 'duration-900',
        '850': 'duration-850',
        '800': 'duration-800',
        '750': 'duration-750',
        '700': 'duration-700',
        '650': 'duration-650',
        '600': 'duration-600',
        '550': 'duration-550',
        '500': 'duration-500',
        '475': 'duration-475',
        '450': 'duration-450',
        '425': 'duration-425',
        '400': 'duration-400',
        '375': 'duration-375',
        '350': 'duration-350',
        '325': 'duration-325',
        '300': 'duration-300',
        '275': 'duration-275',
        '250': 'duration-250',
        '225': 'duration-225',
        '200': 'duration-200',
        '175': 'duration-175',
        '150': 'duration-150',
        '125': 'duration-125',
        '100': 'duration-100',
        '75': 'duration-75',
        '50': 'duration-50',
        '25': 'duration-25',
    },
    easings: {
        linear: 'ease-linear',
        in: 'ease-in',
        out: 'ease-out',
        inOut: 'ease-in-out',
    },
    transitions: {
        default: 'transition',
        all: 'transition-all',
        colors: 'transition-colors',
        none: 'transition-none',
        opacity: 'transition-opacity',
        shadow: 'transition-shadow',
        transform: 'transition-transform',
    },
    getDurationClasses: function ( durationsKey ) {
        const key = durationsKey && this.durations?.[durationsKey] ? durationsKey : '300'
        const output = this.durations?.[key] ? this.durations?.[key] : ''
        return output
    },
    getEasingClasses: function ( easingsKey ) {
        const key = easingsKey && this.easings?.[easingsKey] ? easingsKey : 'inOut'
        const output = this.easings?.[key] ? this.easings?.[key] : ''
        return output
    },
    getTransitionClasses: function ( transitionsKey ) {
        const key = transitionsKey && this.transitions?.[transitionsKey] ? transitionsKey : 'default'
        const output = this.transitions?.[key] ? this.transitions?.[key] : ''
        return output
    },
    custom: function ( settings ) {
        const obj = {
            transitions: settings && settings.transitions ? settings.transitions : '',
            easings: settings && settings.easings ? settings.easings : '',
            durations: settings && settings.durations ? settings.durations : '',
        }
        return [
            this.getTransitionClasses(obj.transitions),
            this.getEasingClasses(obj.easings),
            this.getDurationClasses(obj.durations),
        ].join(' ').replace(/\s+/g,' ').trim()
    },
    classes: function ( transitionsKey, easingsKey, durationsKey ) {
        const transitions = transitionsKey ? transitionsKey : ''
        const easings = easingsKey ? easingsKey : ''
        const durations = durationsKey ? durationsKey : ''
        return [
            this.getTransitionClasses(transitions),
            this.getEasingClasses(easings),
            this.getDurationClasses(durations),
        ].join(' ').replace(/\s+/g,' ').trim()
    },
}

Transitions Config Module ​

app.vv.ts Use ​

Import ​

Transitions.durations ​

Examples ​

Transitions.easings ​

Examples ​

Transitions.transitions ​

Examples ​

Transitions.classes() ​

Arguments ​

Examples ​

Transitions.custom() ​

Arguments ​

Examples ​

Transitions.getDurationClasses() ​

Arguments ​

Examples ​

Transitions.getEasingClasses() ​

Arguments ​

Examples ​

Transitions.getTransitionClasses() ​

Arguments ​

Examples ​

Module Code ​

Transitions Config Module

app.vv.ts Use

Import

Transitions.durations

Examples

Transitions.easings

Examples

Transitions.transitions

Examples

Transitions.classes()

Arguments

Examples

Transitions.custom()

Arguments

Examples

Transitions.getDurationClasses()

Arguments

Examples

Transitions.getEasingClasses()

Arguments

Examples

Transitions.getTransitionClasses()

Arguments

Examples

Module Code