formstone
Version:
Library of modular front end components.
1 lines • 8.58 kB
JSON
{"main":["transition.js"],"options":[{"name":"always","type":"boolean","default":"False","description":"Flag to always react to transition end (.on vs .one)"},{"name":"property","type":"string","default":"null","description":"Property to react to"},{"name":"target","type":"string","default":"null","description":"Target child selector"}],"events":[],"methods":[{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.transition(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").transition(\"destroy\");"]},{"name":"resolve","description":"Resolves current transition end events.","examples":["$(\".target\").transition(\"resolve\");"]}],"name":"Transition","type":"widget","description":"A jQuery plugin for CSS transition events.","dependencies":["jQuery","core.js"],"css":[{"name":".fs-transition-element","type":"element","description":"Target Element"}],"use":"### Basic\n\nTransition provides a predictable interface for moving to CSS based animations:\n\n```javascript\n$(\".target\").transition(function() {\n ...\n}).addClass(\"visible\");\n```\n\n### Resolve\n\nTransitions can manually resolved, which will immediately fire the associated callback:\n\n```javascript\nif (shouldResolve) {\n $(\".target\").transition(\"resolve\");\n}\n```","demo":"<h4>Basic</h4>\r\n\r\n<!-- START: FIRSTDEMO -->\r\n\r\n<style>\r\n .transitions { margin: 0 0 20px; }\r\n .transition_track { background: #fff; border: 1px solid #455a64; margin: 20px 0; }\r\n .transition { background-color: #00bcd4; height: 30px; width: 10%;\r\n -webkit-transition: margin 0.5s ease, height 0.5s linear 0.5s;\r\n transition: margin 0.5s ease, height 0.5s linear 0.5s;\r\n }\r\n .transition.move { margin-left: 90%; }\r\n .transition_property.move {\r\n height: 50px;\r\n }\r\n\r\n .output { display: inline-block; margin: 0 0 0 10px; }\r\n</style>\r\n\r\n<script>\r\n Formstone.Ready(function() {\r\n $(\".transition_basic\").transition({\r\n always: true\r\n }, complete);\r\n\r\n $(\".transition_parent\").transition({\r\n always: true,\r\n target: \".transition_delegate\"\r\n }, complete);\r\n\r\n $(\".transition_property\").transition({\r\n always: true,\r\n property: \"height\"\r\n }, complete);\r\n\r\n $(\".trigger\").on(\"click\", start);\r\n });\r\n\r\n function start() {\r\n var $target = $(this).parent(\".transitions\").find(\".transition\");\r\n\r\n if (!$target.hasClass(\"animating\")) {\r\n $target.toggleClass(\"move\")\r\n .addClass(\"animating\");\r\n\r\n output($target, \" \");\r\n }\r\n }\r\n\r\n function complete() {\r\n var $target = $(this);\r\n\r\n if (!$target.hasClass(\"transition\")) {\r\n $target = $(this).find(\".transition\");\r\n }\r\n\r\n $target.removeClass(\"animating\");\r\n output($target, \"Complete\");\r\n }\r\n\r\n function output($target, text) {\r\n $target.parents(\".transitions\").find(\".output\").text(text);\r\n }\r\n</script>\r\n\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"transitions\">\r\n <div class=\"transition_track\">\r\n <div class=\"transition transition_basic\"></div>\r\n </div>\r\n <button class=\"button trigger\">Start</button>\r\n <div class=\"output\"> </div>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class="transition_target"></div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".transition_target\").transition({\r\n always: true\r\n}, function() {\r\n // Tranition complete...\r\n}).addClass(\"active\");</code></pre>\r\n <pre><code class=\"language-css\">.transition_target {\r\n background: black;\r\n transition: background 0.25s;\r\n}\r\n\r\n.transition_target.active {\r\n background: blue;\r\n}</code></pre>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- END: FIRSTDEMO -->\r\n\r\n<h4>Delegation</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"transitions\">\r\n <div class=\"transition_track transition_parent\">\r\n <div class=\"transition transition_delegate\"></div>\r\n </div>\r\n <button class=\"button trigger\">Start</button>\r\n <div class=\"output\"> </div>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class="transition_target">\r\n	<div class="transition_child"></div>\r\n</div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".transition_target\").transition({\r\n always: true,\r\n target: \".transition_child\"\r\n}, function() {\r\n // Tranition complete...\r\n}).addClass(\"active\");</code></pre>\r\n <pre><code class=\"language-css\">.transition_target .transition_child {\r\n background: black;\r\n transition: background 0.25s;\r\n}\r\n\r\n.transition_target.active .transition_child {\r\n background: blue;\r\n}</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Property</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"transitions\">\r\n <div class=\"transition_track\">\r\n <div class=\"transition transition_property\"></div>\r\n </div>\r\n <button class=\"button trigger\">Start</button>\r\n <div class=\"output\"> </div>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class="transition_target"></div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".transition_target\").transition({\r\n always: true,\r\n property: \"height\"\r\n}, function() {\r\n // Tranition complete...\r\n}).addClass(\"active\");</code></pre>\r\n <pre><code class=\"language-css\">.transition_target {\r\n background: black;\r\n height: 10px;\r\n transition:\r\n background 0.25s linear 0s,\r\n height 0.25s linear 1s;\r\n}\r\n\r\n.transition_target.active {\r\n background: blue;\r\n height: 30px;\r\n}</code></pre>\r\n </div>\r\n</div>\r\n","document":"# Transition\n\nA jQuery plugin for CSS transition events.\n\n<!-- HEADER END -->\n\n<!-- NAV START -->\n\n* [Use](#use)\n* [Options](#options)\n* [Methods](#methods)\n* [CSS](#css)\n\n<!-- NAV END -->\n\n<!-- DEMO BUTTON -->\n\n<a name=\"use\"></a>\n\n## Using Transition\n\n\n#### Main\n\n```markup\ntransition.js\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\n```\n\n### Basic\n\nTransition provides a predictable interface for moving to CSS based animations:\n\n```javascript\n$(\".target\").transition(function() {\n ...\n}).addClass(\"visible\");\n```\n\n### Resolve\n\nTransitions can manually resolved, which will immediately fire the associated callback:\n\n```javascript\nif (shouldResolve) {\n $(\".target\").transition(\"resolve\");\n}\n```\n\n\n<a name=\"options\"></a>\n\n## Options\n\nSet instance options by passing a valid object at initialization, or to the public `defaults` method. Custom options for a specific instance can also be set by attaching a `data-transition-options` attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `always` | `boolean` | `False` | Flag to always react to transition end (.on vs .one) |\n| `property` | `string` | `null` | Property to react to |\n| `target` | `string` | `null` | Target child selector |\n\n<hr>\n<a name=\"methods\"></a>\n\n## Methods\n\nMethods are publicly available to all active instances, unless otherwise stated.\n\n### defaults\n\nExtends plugin default settings; effects instances created hereafter.\n\n```javascript\n$.transition(\"defaults\", { ... });\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `options` | `object` | `{}` | New plugin defaults |\n\n### destroy\n\nRemoves plugin instance.\n\n```javascript\n$(\".target\").transition(\"destroy\");\n```\n\n### resolve\n\nResolves current transition end events.\n\n```javascript\n$(\".target\").transition(\"resolve\");\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-transition-element` | `element` | Target Element |\n\n"}