-
Notifications
You must be signed in to change notification settings - Fork 0
/
24717abd.8783100b.js
1 lines (1 loc) · 8.39 KB
/
24717abd.8783100b.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{128:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return l})),n.d(t,"toc",(function(){return o})),n.d(t,"default",(function(){return u}));var r=n(3),s=n(7),a=(n(0),n(482)),c={title:"5-4 Keyframes/Keyframe Rule"},l={unversionedId:"css/css-rendering/keyframe_rule",id:"css/css-rendering/keyframe_rule",isDocsHomePage:!1,title:"5-4 Keyframes/Keyframe Rule",description:"from/to \ub294 keyframe animation selector \uc774\ub77c\ub294 \uac83\uc774\ub2e4.",source:"@site/docs/css/css-rendering/keyframe_rule.md",slug:"/css/css-rendering/keyframe_rule",permalink:"/docs/css/css-rendering/keyframe_rule",version:"current",lastUpdatedAt:1626882853,sidebar:"css",previous:{title:"5-3 Style Rule",permalink:"/docs/css/css-rendering/style_rule"},next:{title:"5-5 Typed CSSOM",permalink:"/docs/css/css-rendering/typed_cssom"}},o=[],i={toc:o};function u(e){var t=e.components,n=Object(s.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},i,n,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,Object(a.b)("em",{parentName:"p"},"from/to")," \ub294 keyframe animation selector \uc774\ub77c\ub294 \uac83\uc774\ub2e4.\n\uc774\uac83\uc744 \uc5b4\ub5bb\uac8c \uac1d\uccb4\ud654 \uc2dc\ud0ac\uae4c?"),Object(a.b)("pre",null,Object(a.b)("code",{parentName:"pre",className:"language-css"},"@keyframes size {\n from {width: 0}\n to {width: 500px}\n}\n")),Object(a.b)("pre",null,Object(a.b)("code",{parentName:"pre",className:"language-javascript"},"const sheet = new Sheet(document.styleSheets[1]);\nsheet.add('@keyframes size').set(/* ... */);\n")),Object(a.b)("pre",null,Object(a.b)("code",{parentName:"pre",className:"language-javascript"},"const Sheet = class {\n constructor(sheet) { /* ... */}\n add(selector) {\n const index = this._sheet.cssRules.length;\n this._sheet.insertRule(`${selector}{}`, index);\n const cssRule = this._sheet.cssRules[index];\n\n // \uc5ec\uae30\uc11c\ubd80\ud130 \ubb38\uc81c.. style rule \ub85c \uac00\uc815\ud55c \ubd80\ubd84... \uc758\uc874\uc131 \uc8fc\uc785! \uc5ec\uae30\uc11c\ub294 \ubd84\uae30\ubb38\uc73c\ub85c \uc791\uc131\n const rule = new Rule(cssRule); \n this._rules.set(selector, rule);\n return rule;\n }\n}\n")),Object(a.b)("pre",null,Object(a.b)("code",{parentName:"pre",className:"language-javascript"},"const Sheet = class {\n constructor(sheet) { /* ... */}\n add(selector) {\n const index = this._sheet.cssRules.length;\n this._sheet.insertRule(`${selector}{}`, index);\n const cssRule = this._sheet.cssRules[index];\n\n let rule;\n if (selector.startWith('@keyframes')) { \n // \ud0a4\ud504\ub808\uc784 \uc560\ub2c8\ub9e4\uc774\uc158 \ucc98\ub9ac\n rule = new KeyFramesRule(cssRule); // delegation\n } else {\n rule = new Rule(cssRule); \n }\n\n this._rules.set(selector, rule);\n return rule;\n }\n}\n")),Object(a.b)("p",null,"keyframeRule \uac1d\uccb4\ub294 sheet \uac1d\uccb4\uc640 \uac70\uc758 \ub611\uac19\ub2e4.",Object(a.b)("br",{parentName:"p"}),"\n","size \uac00 \ud558\ub098\uc758 rule \uc774\uae34 \ud558\uc9c0\ub9cc from, to \uc548\ucabd\uc774 style_sheet \ucc98\ub7fc \uc0dd\uacbc\ub2e4.",Object(a.b)("br",{parentName:"p"}),"\n","insertRule \ub300\uc2e0 appendRule \uc744 \uc4f4\ub2e4."),Object(a.b)("pre",null,Object(a.b)("code",{parentName:"pre",className:"language-javascript",metastring:"{2,3,4,8}","{2,3,4,8}":!0},"const KeyFramesRule = class {\n constructor(rule) {\n this._keyframe = rule;\n this._rules = new Map;\n }\n add(selector) {\n const index = this._keyframe.cssRules.length;\n this._keyframe.appendRule(`${selector}{}`, index);\n const cssRule = this._keyframe.cssRules[index];\n const rule = new Rule(cssRule); \n this._rules.set(selector, rule);\n return rule;\n }\n remove(selector) {\n if (!this._rules.contains(selector)) return;\n const rule = this._rules.get(selector)._rule;\n Array.from(this._keyframe.cssRules).some((cssRule, index) => {\n if (cssRule === rule._rule) {\n this._keyframe.deleteRule(index);\n return true;\n }\n })\n }\n get(selector) {\n return this._rules.get(selector);\n }\n}\n")),Object(a.b)("pre",null,Object(a.b)("code",{parentName:"pre",className:"language-javascript"},'const KeyFramesRule = class {\n constructor(rule) { /* ... */}\n add(selector) { /* ... */}\n remove(selector) { /* ... */}\n}\n\nconst sheet = new Sheet(document.styleSheets[0]);\nconst size = sheet.add(\'@keyframes size\');\nsize.add("from").set("width", "0");\nsize.add("to").set("width", "500px");\n')),Object(a.b)("pre",null,Object(a.b)("code",{parentName:"pre",className:"language-html"},'<!doctype html>\n<html>\n<head>\n <meta charset="utf-8">\n <title></title>\n <style> \n .test {\n background: #f00;\n animation: size 1s infinite alternate;\n }\n </style>\n</head>\n<body>\n <div class="test">test</div>\n</body>\n</html>\n')),Object(a.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(a.b)("div",{parentName:"div",className:"admonition-heading"},Object(a.b)("h5",{parentName:"div"},Object(a.b)("span",{parentName:"h5",className:"admonition-icon"},Object(a.b)("svg",{parentName:"span",xmlns:"https://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},Object(a.b)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"tip")),Object(a.b)("div",{parentName:"div",className:"admonition-content"},Object(a.b)("p",{parentName:"div"},"\ud2b9\uc218\ud55c \uc560\ub2c8\uba54\uc774\uc158\uc744 \ub3d9\uc801\uc73c\ub85c \uc815\uc758\ud574\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uac8c \ub418\uc5c8\ub2e4.",Object(a.b)("br",{parentName:"p"}),"\n","\ud0a4\ud504\ub808\uc784 \uc2e4\ub809\ud130\ub97c \uc815\uc758\ud574\uc11c \ub3d9\uc801\uc815\uc758 / \uc7ac\ud65c\uc6a9 \uac00\ub2a5\ud558\ub2e4."))))}u.isMDXComponent=!0},482:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return b}));var r=n(0),s=n.n(r);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,r,s=function(e,t){if(null==e)return{};var n,r,s={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(s[n]=e[n]);return s}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(s[n]=e[n])}return s}var i=s.a.createContext({}),u=function(e){var t=s.a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=u(e.components);return s.a.createElement(i.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return s.a.createElement(s.a.Fragment,{},t)}},d=s.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,c=e.parentName,i=o(e,["components","mdxType","originalType","parentName"]),p=u(n),d=r,b=p["".concat(c,".").concat(d)]||p[d]||m[d]||a;return n?s.a.createElement(b,l(l({ref:t},i),{},{components:n})):s.a.createElement(b,l({ref:t},i))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,c=new Array(a);c[0]=d;var l={};for(var o in t)hasOwnProperty.call(t,o)&&(l[o]=t[o]);l.originalType=e,l.mdxType="string"==typeof e?e:r,c[1]=l;for(var i=2;i<a;i++)c[i]=n[i];return s.a.createElement.apply(null,c)}return s.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);