{"id":1925,"date":"2025-08-12T21:43:31","date_gmt":"2025-08-12T12:43:31","guid":{"rendered":"https:\/\/ani2life.com\/wp\/?p=1925"},"modified":"2025-08-12T21:43:31","modified_gmt":"2025-08-12T12:43:31","slug":"element-animate%eb%a1%9c-opacity-%eb%b3%80%ea%b2%bd-%ec%8b%9c-%ea%b9%8a%ec%9d%b4%ea%b0%80-%eb%8b%ac%eb%9d%bc%ec%a7%80%eb%8a%94-%eb%ac%b8%ec%a0%9c","status":"publish","type":"post","link":"https:\/\/ani2life.com\/wp\/?p=1925","title":{"rendered":"Element: animate()\ub85c opacity \ubcc0\uacbd \uc2dc \uae4a\uc774\uac00 \ub2ec\ub77c\uc9c0\ub294 \ubb38\uc81c"},"content":{"rendered":"<p>JS\uc5d0\uc11c Element \uac1d\uccb4\uc758 animate() \uba54\uc11c\ub4dc\ub85c opacity \ubcc0\ud654\ub97c \uc900 \uc694\uc18c\ub294 \uc774\uc0c1\ud558\uac8c\ub3c4 \ub2e4\ub978 \ud615\uc81c \uc694\uc18c\ub4e4 \ubcf4\ub2e4 \ub4a4\ub85c(?) \uac04\ub2e4. animate()\ub97c \uc801\uc6a9\ud55c \uc694\uc18c\uc758 \uc790\uc2dd \uc694\uc18c\uc5d0 \ub192\uc740 z-index\ub97c \uc8fc\uace0 \ub808\uc774\uc5b4\ub85c \ub744\uc6e0\ub294\ub370 \ubd80\ubaa8 \uc694\uc18c\uc758 \ud615\uc81c \uc694\uc18c\ub4e4 \ub4a4\ub85c \uc228\uaca8\uc9c4\ub2e4. \ud30c\uc774\uc5b4\ud3ed\uc2a4, \ud06c\ub86c, \uc0ac\ud30c\ub9ac \ubaa8\ub450 \uac19\uc740 \uc99d\uc0c1.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">element.animate(\r\n    [{opacity: 0}, {opacity: 1}],\r\n    {\r\n        duration: 200,\r\n        fill: 'forwards',\r\n        easing: 'ease-in-out'\r\n    }\r\n);<\/pre>\n<p>\ud558\uc9c0\ub9cc \uc9c1\uc811 style \ud504\ub85c\ud37c\ud2f0\ub97c \uc218\uc815\ud558\ub294 \uad6c\uc2dd \ubc29\ubc95\uc5d0\uc11c\ub294 \ubb38\uc81c\uac00 \uc5c6\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">element.style.opacity = '0';\r\nelement.style.transition = 'opacity .2s ease-in-out';\r\nrequestAnimationFrame(() =&gt; {\r\n    element.style.opacity = '1';\r\n});<\/pre>\n<p>\ubaa8\ub4e0 \ube0c\ub77c\uc6b0\uc800\uac00 \uac19\uc740 \uc99d\uc0c1\uc744 \ubcf4\uc774\ub2c8 \uc774\uac8c \ud45c\uc900 \ub3d9\uc791\uc778 \uac78\uae4c?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JS\uc5d0\uc11c Element \uac1d\uccb4\uc758 animate() \uba54\uc11c\ub4dc\ub85c opacity \ubcc0\ud654\ub97c \uc900 \uc694\uc18c\ub294 \uc774\uc0c1\ud558\uac8c\ub3c4 \ub2e4\ub978 \ud615\uc81c \uc694\uc18c\ub4e4 \ubcf4\ub2e4 \ub4a4\ub85c(?) \uac04\ub2e4. animate()\ub97c \uc801\uc6a9\ud55c \uc694\uc18c\uc758 \uc790\uc2dd \uc694\uc18c\uc5d0 \ub192\uc740 z-index\ub97c \uc8fc\uace0 \ub808\uc774\uc5b4\ub85c \ub744\uc6e0\ub294\ub370 \ubd80\ubaa8 \uc694\uc18c\uc758 \ud615\uc81c \uc694\uc18c\ub4e4 \ub4a4\ub85c \uc228\uaca8\uc9c4\ub2e4. \ud30c\uc774\uc5b4\ud3ed\uc2a4, \ud06c\ub86c, \uc0ac\ud30c\ub9ac \ubaa8\ub450 \uac19\uc740 \uc99d\uc0c1. element.animate( [{opacity: 0}, {opacity: 1}], { duration: 200, fill: &#8216;forwards&#8217;, easing: &#8216;ease-in-out&#8217; } ); \ud558\uc9c0\ub9cc \uc9c1\uc811 style [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[7],"tags":[77,575],"_links":{"self":[{"href":"https:\/\/ani2life.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/1925"}],"collection":[{"href":"https:\/\/ani2life.com\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ani2life.com\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ani2life.com\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ani2life.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1925"}],"version-history":[{"count":1,"href":"https:\/\/ani2life.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/1925\/revisions"}],"predecessor-version":[{"id":1926,"href":"https:\/\/ani2life.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/1925\/revisions\/1926"}],"wp:attachment":[{"href":"https:\/\/ani2life.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ani2life.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ani2life.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}