transition-element-property-helper/src/transition-element-property-helper.min.js

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

/*!
 * transition-element-property-helper v1.1.3 (https://github.com/AntonPluginsCreator/transition-element-property-helper)
 * Copyright (c) 2021-2022 Anton Maklakov
 * Licensed under MIT (https://github.com/AntonPluginsCreator/transition-element-property-helper/blob/main/LICENSE)
 */
(function(t,e){"undefined"!=typeof module&&module.exports?module.exports=e():t.TransitionElementPropertyHelper=e()})(this,function(){"use strict";function t(t){switch(t){case 1:console.error("Element not found");break;default:console.error("Error")}}function e(t){return t.split(",").length}function n(t){return t.split(",")}function o(t){let o=[n(getComputedStyle(t).transitionDelay),n(getComputedStyle(t).transitionDuration),n(getComputedStyle(t).transitionProperty),n(getComputedStyle(t).transitionTimingFunction)],i=[],l={Delay:"",Duration:"",Property:"",TimingFunction:""};for(let n=0;n<e(getComputedStyle(t).transition);n++)o.forEach((t,e)=>{l[String(Object.keys(l)[e])]=t[n].replace(/ +/g," ").trim()}),i.push(l),l={Delay:"",Duration:"",Property:"",TimingFunction:""};return i}return class{constructor(t){this._element=t}start(){this._element.addEventListener("transitionstart",()=>{this._element?(console.log("Transition: "+getComputedStyle(this._element).transition),console.log("Delay: "+getComputedStyle(this._element).transitionDelay),console.log("Duration: "+getComputedStyle(this._element).transitionDuration),console.log("Property: "+getComputedStyle(this._element).transitionProperty),console.log("Timing function: "+getComputedStyle(this._element).transitionTimingFunction)):t(1)})}showTransition(){this._element?console.log("Transition: "+getComputedStyle(this._element).transition):t(1)}showDelay(){this._element?console.log("Delay: "+getComputedStyle(this._element).transitionDelay):t(1)}showDuration(){this._element?console.log("Duration: "+getComputedStyle(this._element).transitionDuration):t(1)}showProperty(){this._element?console.log("Property: "+getComputedStyle(this._element).transitionProperty):t(1)}showTimingFunction(){this._element?console.log("Timing function: "+getComputedStyle(this._element).transitionTimingFunction):t(1)}showTransitionTable(){this._element?console.table(o(this._element)):t(1)}showTransitionArray(){this._element?console.log(o(this._element)):t(1)}showTransitionJSON(){this._element?console.log(JSON.stringify(o(this._element))):t(1)}}});