☰

Watch Transition

watches for a transition event and prints it to the console

  1. // ==UserScript==
  2. // @name            Watch Transition
  3. // @namespace       almaceleste
  4. // @version         0.2.0
  5. // @description     watches for a transition event and prints it to the console
  6. // @description:ru  отслеживает событие transition и выводит его в консоль
  7. // @author          (ɔ) Paola Captanovska
  8. // @license         AGPL-3.0-or-later; http://www.gnu.org/licenses/agpl
  9. // @icon            https://cdn1.iconfinder.com/data/icons/jumpicon-basic-ui-line-1/32/-_Eye-Show-View-Watch-See-16.png
  10. // @icon64          https://cdn1.iconfinder.com/data/icons/jumpicon-basic-ui-line-1/32/-_Eye-Show-View-Watch-See-64.png
  11.  
  12. // @homepageURL     https://gf.qytechs.cn/en/users/174037-almaceleste
  13. // @homepageURL     https://openuserjs.org/users/almaceleste
  14. // @homepageURL     https://github.com/almaceleste/userscripts
  15. // @supportURL      https://github.com/almaceleste/userscripts/issues
  16.  
  17. // @require         https://code.jquery.com/jquery-3.3.1.js
  18. // @require         https://openuserjs.org/src/libs/sizzle/GM_config.js
  19. // @grant           GM_getValue
  20. // @grant           GM_setValue
  21. // @grant           GM_registerMenuCommand
  22. // @grant           GM_openInTab
  23.  
  24. // @match           http*://*/*
  25. // ==/UserScript==
  26.  
  27. // ==OpenUserJS==
  28. // @author almaceleste
  29. // ==/OpenUserJS==
  30.  
  31. const windowcss = `
  32.     #wtCfg {
  33.         background-color: lightblue;
  34.     }
  35.     #wtCfg .reset_holder {
  36.         float: left;
  37.         position: relative;
  38.         bottom: -1em;
  39.     }
  40.     #wtCfg .saveclose_buttons {
  41.         margin: .7em;
  42.     }
  43.     #wtCfg_field_url {
  44.         background: none !important;
  45.         border: none;
  46.         cursor: pointer;
  47.         padding: 0 !important;
  48.         text-decoration: underline;
  49.     }
  50.     #wtCfg_field_url:hover,
  51.     #wtCfg_resetLink:hover {
  52.         filter: drop-shadow(0 0 1px dodgerblue);
  53.     }
  54. `;
  55. const iframecss = `
  56.     height: 34.5em;
  57.     width: 25em;
  58.     border: 1px solid;
  59.     border-radius: 3px;
  60.     position: fixed;
  61.     z-index: 9999;
  62. `;
  63.  
  64. GM_registerMenuCommand('Watch Transition Settings', opencfg);
  65.  
  66. function opencfg(){
  67. 	GM_config.open();
  68. 	wtCfg.style = iframecss;
  69. }
  70.  
  71. GM_config.init({
  72.     id: 'wtCfg',
  73.     title: `Watch Transition ${GM_info.script.version}`,
  74.     fields: {
  75.         run: {
  76.             section: ['', 'Watch events'],
  77.             label: 'transitionrun (created, not started)',
  78.             labelPos: 'right',
  79.             title: 'fired when a CSS transition is created, when it is added to a set of running transitions, though not necessarily started',
  80.             type: 'checkbox',
  81.             default: false,
  82.         },
  83.         start: {
  84.             label: 'transitionstart (started)',
  85.             labelPos: 'right',
  86.             title: 'fired when a CSS transition has started transitioning',
  87.             type: 'checkbox',
  88.             default: false,
  89.         },
  90.         cancel: {
  91.             label: 'transitioncancel (canceled)',
  92.             labelPos: 'right',
  93.             title: 'fired when a CSS transition has been cancelled',
  94.             type: 'checkbox',
  95.             default: false,
  96.         },
  97.         end: {
  98.             label: 'transitionend (finished)',
  99.             labelPos: 'right',
  100.             title: 'fired when a CSS transition has finished playing (most useful)',
  101.             type: 'checkbox',
  102.             default: true,
  103.         },
  104.         property: {
  105.             label: 'print event property',
  106.             labelPos: 'left',
  107.             type: 'select',
  108.             title: 'print one preferred event property before the whole event',
  109.             options: [
  110.                 'none',
  111.                 'bubbles',
  112.                 'cancelBubble',
  113.                 'cancelable',
  114.                 'composed',
  115.                 'currentTarget',
  116.                 'defaultPrevented',
  117.                 'elapsedTime',
  118.                 'eventPhase',
  119.                 'isTrusted',
  120.                 'path',
  121.                 'propertyName',
  122.                 'pseudoElement',
  123.                 'returnValue',
  124.                 'srcElement',
  125.                 'target',
  126.                 'timestamp',
  127.                 'type'
  128.             ],
  129.             default: 'target',
  130.         },
  131.         italic: {
  132.             section: ['', 'Style Settings'],
  133.             label: 'italic font',
  134.             labelPos: 'right',
  135.             type: 'checkbox',
  136.             default: false,
  137.         },
  138.         bold: {
  139.             label: 'bold font',
  140.             labelPos: 'right',
  141.             type: 'checkbox',
  142.             default: false,
  143.         },
  144.         method: {
  145.             label: 'console method',
  146.             labelPos: 'left',
  147.             type: 'select',
  148.             options: [
  149.                 'debug',
  150.                 'dir',
  151.                 'dirxml',
  152.                 'error',
  153.                 'info',
  154.                 'log',
  155.                 'warn'
  156.             ],
  157.             default: 'log',
  158.         },
  159.         runcolor: {
  160.             label: 'transitionrun color',
  161.             labelPos: 'left',
  162.             type: 'select',
  163.             options: [
  164.                 'unset',
  165.                 'black',
  166.                 'blue',
  167.                 'green',
  168.                 'aqua',
  169.                 'red',
  170.                 'purple',
  171.                 'yellow',
  172.                 'white',
  173.                 'gray',
  174.                 'lightskyblue',
  175.                 'lightgreen',
  176.                 'orangered',
  177.                 'pink',
  178.                 'gold',
  179.                 'whitesmoke',
  180.                 'lightgray',
  181.                 'dimgray'
  182.             ],
  183.             default: 'unset',
  184.         },
  185.         runbackground: {
  186.             label: 'transitionrun background',
  187.             labelPos: 'left',
  188.             type: 'select',
  189.             options: [
  190.                 'unset',
  191.                 'black',
  192.                 'blue',
  193.                 'green',
  194.                 'aqua',
  195.                 'red',
  196.                 'purple',
  197.                 'yellow',
  198.                 'white',
  199.                 'gray',
  200.                 'lightskyblue',
  201.                 'lightgreen',
  202.                 'orangered',
  203.                 'pink',
  204.                 'gold',
  205.                 'whitesmoke',
  206.                 'lightgray',
  207.                 'dimgray'
  208.             ],
  209.             default: 'unset',
  210.         },
  211.         startcolor: {
  212.             label: 'transitionstart color',
  213.             labelPos: 'left',
  214.             type: 'select',
  215.             options: [
  216.                 'unset',
  217.                 'black',
  218.                 'blue',
  219.                 'green',
  220.                 'aqua',
  221.                 'red',
  222.                 'purple',
  223.                 'yellow',
  224.                 'white',
  225.                 'gray',
  226.                 'lightskyblue',
  227.                 'lightgreen',
  228.                 'orangered',
  229.                 'pink',
  230.                 'gold',
  231.                 'whitesmoke',
  232.                 'lightgray',
  233.                 'dimgray'
  234.             ],
  235.             default: 'unset',
  236.         },
  237.         startbackground: {
  238.             label: 'transitionstart background',
  239.             labelPos: 'left',
  240.             type: 'select',
  241.             options: [
  242.                 'unset',
  243.                 'black',
  244.                 'blue',
  245.                 'green',
  246.                 'aqua',
  247.                 'red',
  248.                 'purple',
  249.                 'yellow',
  250.                 'white',
  251.                 'gray',
  252.                 'lightskyblue',
  253.                 'lightgreen',
  254.                 'orangered',
  255.                 'pink',
  256.                 'gold',
  257.                 'whitesmoke',
  258.                 'lightgray',
  259.                 'dimgray'
  260.             ],
  261.             default: 'unset',
  262.         },
  263.         cancelcolor: {
  264.             label: 'transitioncancel color',
  265.             labelPos: 'left',
  266.             type: 'select',
  267.             options: [
  268.                 'unset',
  269.                 'black',
  270.                 'blue',
  271.                 'green',
  272.                 'aqua',
  273.                 'red',
  274.                 'purple',
  275.                 'yellow',
  276.                 'white',
  277.                 'gray',
  278.                 'lightskyblue',
  279.                 'lightgreen',
  280.                 'orangered',
  281.                 'pink',
  282.                 'gold',
  283.                 'whitesmoke',
  284.                 'lightgray',
  285.                 'dimgray'
  286.             ],
  287.             default: 'unset',
  288.         },
  289.         cancelbackground: {
  290.             label: 'transitioncancel background',
  291.             labelPos: 'left',
  292.             type: 'select',
  293.             options: [
  294.                 'unset',
  295.                 'black',
  296.                 'blue',
  297.                 'green',
  298.                 'aqua',
  299.                 'red',
  300.                 'purple',
  301.                 'yellow',
  302.                 'white',
  303.                 'gray',
  304.                 'lightskyblue',
  305.                 'lightgreen',
  306.                 'orangered',
  307.                 'pink',
  308.                 'gold',
  309.                 'whitesmoke',
  310.                 'lightgray',
  311.                 'dimgray'
  312.             ],
  313.             default: 'unset',
  314.         },
  315.         endcolor: {
  316.             label: 'transitionend color',
  317.             labelPos: 'left',
  318.             type: 'select',
  319.             options: [
  320.                 'unset',
  321.                 'black',
  322.                 'blue',
  323.                 'green',
  324.                 'aqua',
  325.                 'red',
  326.                 'purple',
  327.                 'yellow',
  328.                 'white',
  329.                 'gray',
  330.                 'lightskyblue',
  331.                 'lightgreen',
  332.                 'orangered',
  333.                 'pink',
  334.                 'gold',
  335.                 'whitesmoke',
  336.                 'lightgray',
  337.                 'dimgray'
  338.             ],
  339.             default: 'unset',
  340.         },
  341.         endbackground: {
  342.             label: 'transitionend background',
  343.             labelPos: 'left',
  344.             type: 'select',
  345.             options: [
  346.                 'unset',
  347.                 'black',
  348.                 'blue',
  349.                 'green',
  350.                 'aqua',
  351.                 'red',
  352.                 'purple',
  353.                 'yellow',
  354.                 'white',
  355.                 'gray',
  356.                 'lightskyblue',
  357.                 'lightgreen',
  358.                 'orangered',
  359.                 'pink',
  360.                 'gold',
  361.                 'whitesmoke',
  362.                 'lightgray',
  363.                 'dimgray'
  364.             ],
  365.             default: 'unset',
  366.         },
  367.         url: {
  368.             section: ['', 'Support'],
  369.             label: 'almaceleste.github.io',
  370.             type: 'button',
  371.             click: () => {
  372.                 GM_openInTab('https://almaceleste.github.io', {
  373.                     active: true,
  374.                     insert: true,
  375.                     setParent: true
  376.                 });
  377.             }
  378.         },
  379.     },
  380.     css: windowcss,
  381.     events: {
  382.         save: function() {
  383.             GM_config.close();
  384.         }
  385.     },
  386. });
  387.  
  388. function log(type, event){
  389.     const color = GM_config.get(`${type}color`);
  390.     const background = GM_config.get(`${type}background`);
  391.     const style = `
  392.         color: ${color};
  393.         background-color: ${background};
  394.         font-style: ${GM_config.get('italic') ? 'italic' : 'unset'};
  395.         font-weight: ${GM_config.get('bold') ? 'bold' : 'unset'};
  396.     `;
  397.     let property = GM_config.get('property');
  398.  
  399.     if (property != 'none') {
  400.         property = event.originalEvent[property];
  401.     }
  402.     else {
  403.         property = '';
  404.     }
  405.  
  406.     switch (GM_config.get('method')) {
  407.         case 'debug':
  408.             console.debug(`%ctransition${type}:`, style, property, event.originalEvent);
  409.             break;
  410.         case 'dir':
  411.             console.log(`%ctransition${type}:`, style, property);
  412.             console.dir(event.originalEvent);
  413.             break;
  414.         case 'dirxml':
  415.             console.log(`%ctransition${type}:`, style, property);
  416.             console.dirxml(event.originalEvent);
  417.             break;
  418.         case 'error':
  419.             console.error(`%ctransition${type}:`, style, property, event.originalEvent);
  420.             break;
  421.         case 'info':
  422.             console.info(`%ctransition${type}:`, style, property, event.originalEvent);
  423.             break;
  424.         case 'log':
  425.             console.log(`%ctransition${type}:`, style, property, event.originalEvent);
  426.             break;
  427.         case 'warn':
  428.             console.warn(`%ctransition${type}:`, style, property, event.originalEvent);
  429.             break;
  430.         default:
  431.             console.log(`%ctransition${type}:`, style, property, event.originalEvent);
  432.             break;
  433.     }
  434. }
  435.  
  436. (function() {
  437.     'use strict';
  438.  
  439.     $(document).ready(() => {
  440.  
  441.         $(window).on({
  442.             transitionrun: (e) => {
  443.                 if (GM_config.get('run')) {
  444.                     log('run', e);
  445.                 }
  446.             },
  447.             transitionstart: (e) => {
  448.                 if (GM_config.get('start')) {
  449.                     log('start', e);
  450.                 }
  451.             },
  452.             transitioncancel: (e) => {
  453.                 if (GM_config.get('cancel')) {
  454.                     log('cancel', e);
  455.                 }
  456.             },
  457.             transitionend: (e) => {
  458.                 if (GM_config.get('end')) {
  459.                     log('end', e);
  460.                 }
  461.             },
  462.         });
  463.     });
  464. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址