transition-element-property-helper

Simple plugin for test transition property for site styles. The test results appear in the console.

Table of contents

• Installation
• Start plugin
• Functions
• The result of the plugin
• License

One file with all the functionality of the plugin

<script src="src/transition-element-property-helper.js"></script>

One minified file with all the functionality of the plugin

<script src="src/transition-element-property-helper.min.js"></script>

Installation

npm i transition-element-property-helper

Start Plugin

new TransitionElementPropertyHelper(document.getElementById('div1')).start();

Functions

Function that starts the transition test when the transition starts

new TransitionElementPropertyHelper(document.getElementById('div1')).start();

Function that shows the transition value once

new TransitionElementPropertyHelper(document.getElementById('div1')).showTransition();

Function that shows the transition-delay value once

new TransitionElementPropertyHelper(document.getElementById('div1')).showDelay();

Function that shows the transition-duration value once

new TransitionElementPropertyHelper(document.getElementById('div1')).showDuration();

Function that shows the transition-property value once

new TransitionElementPropertyHelper(document.getElementById('div1')).showProperty();

Function that shows the transition-timing-function value once

new TransitionElementPropertyHelper(document.getElementById('div1')).showTimingFunction();

Function that displays a table and/or array with transition-property, transition-duration, transition-timing-function, and transition-delay values once

new TransitionElementPropertyHelper(document.getElementById('div1')).showTransitionTable();

Function that shows the value of the transition properties in an array once

new TransitionElementPropertyHelper(document.getElementById('div1')).showTransitionArray();

Function that shows the value of the transition properties in a JSON string once

new TransitionElementPropertyHelper(document.getElementById('div1')).showTransitionJSON();

The result of the plugin

Console

Start

Transition: font-size 2s ease-in 0s, transform 3s ease 1s
Delay: 0s, 1s
Duration: 2s, 3s
Property: font-size, transform
Timing function: ease-in, ease

showProperty like functions or showTransition

Transition: font-size 2s ease-in 0s, transform 3s ease 1s

Delay: 0s, 1s

Duration: 2s, 3s

Property: font-size, transform

Timing function: ease-in, ease

showTransitionTable

| (index) | Delay | Duration | Property | TimingFunction | | ------ | ------ | ------ | ------ | ------ | | 0 |'0s'|'2s'|'font-size'|'ease-in'| | 1 |'1s' |'3s'|'transform'|'ease'|

Array(2)

showTransitionArray

(2) [{…}, {…}]
  0: {Delay: '0s', Duration: '2s', Property: 'font-size', TimingFunction: 'ease-in'}
  1: {Delay: '1s', Duration: '3s', Property: 'transform', TimingFunction: 'ease'}
  length: 2
  [[Prototype]]: Array(0)

showTransitionJSON

[{"Delay":"0s","Duration":"2s","Property":"font-size","TimingFunction":"ease-in"},
{"Delay":"1s","Duration":"3s","Property":"transform","TimingFunction":"ease"}]

License

Licensed under MIT