{"id":2276,"date":"2015-11-06T10:05:01","date_gmt":"2015-11-06T10:05:01","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=2276"},"modified":"2017-01-26T22:33:51","modified_gmt":"2017-01-26T13:33:51","slug":"%ec%9b%b9-%ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98-13-%e3%85%a1-transition-%eb%b0%a9%ec%8b%9d","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=2276","title":{"rendered":"\uc6f9 \uc560\ub2c8\uba54\uc774\uc158 1\/3 \u3161 Transition \ubc29\uc2dd"},"content":{"rendered":"

\uc774\uae00\uc740 \uc6f9\uc5d0\uc11c \ud654\uba74\uc5d0 \ud45c\uc2dc\ub41c \uac1d\uccb4\uc5d0 \ub300\ud55c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\ub294 \ubc29\uc2dd \uc911 Transition \ubc29\uc2dd\uc5d0 \ub300\ud55c \uc815\ub9ac\uc785\ub2c8\ub2e4. \ud604\ub300\uc758 UI\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud55c\ub2e4\ub294 \uac83\uc740 \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc601\uac10\uc744 \ubd88\uc5b4 \ub123\uc744 \uc218 \uc788\ub2e4\ub294 \uc810\uc5d0 \ub9e4\uc6b0 \ucca0\ud559\uc801\uc774\uace0 \uc138\ub828\ub41c \ubc29\ubc95\uc774\ub77c\uace0 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\uba3c\uc800 \uc544\ub798\uc758 \ud654\uba74\uc5d0\uc11c ‘\ud130\uce58\ubbf8!’ \ud14d\uc2a4\ud2b8(div \uc694\uc18c)\ub97c \ud074\ub9ad\ud574 \ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n

[xyz-ihs snippet=”Transition”]<\/p>\n

\ud074\ub9ad\ud560 \ub54c\ub9c8\ub2e4 \uc88c\uc5d0\uc11c \uc6b0\ub85c.. \uc6b0\uc5d0\uc11c \uc88c\ub85c \uc774\ub3d9\ud558\ub294 \uac83\uc744 \uc0b4\ud3b4\ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc704\uc758 \uc608\uc81c\uc5d0 \ub300\ud55c \ucf54\uc2a4\ub97c \uc0b4\ud3b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uba3c\uc800 \ud654\uba74\uc5d0 \ud45c\uc2dc\ub418\ub294 ‘\ud130\uce58\ubbf8!’\uc5d0 \ub300\ud55c div \uc694\uc18c\uc785\ub2c8\ub2e4.<\/p>\n

\r\n
\ud130\uce58\ubbf8!<\/div>\r\n<\/pre>\n
div\uc5d0 box\ub77c\ub294 \ud074\ub798\uc2a4\ub97c \uc9c0\uc815\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. box \ud074\ub798\uc2a4\uc5d0 \ub300\ud55c \uc815\uc758\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n    .box {\r\n        font-family: '\ub9d1\uc740 \uace0\ub515';\r\n        text-align: center;\r\n        line-height: 100px;\r\n\r\n        width: 100px;\r\n        height: 100px;\r\n\r\n        background: #FFF;\r\n        box-shadow: 0 10px 20px rgba(0,0,0,0.5);\r\n\r\n        transform: translate(0, 0);\r\n        transition: transform 1000ms;\r\n    }\r\n<\/pre>\n
2\ubc88~4\ubc88 \ucf54\ub4dc\ub294 div\uc758 ‘\ud130\uce58\ubbf8!’ \ud14d\uc2a4\ud2b8\uc5d0 \ub300\ud55c \ud3f0\ud2b8\uc640 \uc815\ub82c\uc744 \uc9c0\uc815\ud558\uace0 \uc788\uace0, 6\ubc88~7\ubc88\uc740 div\uc758 \ub108\ube44\uc640 \ub192\uc774\uc5d0 \ub300\ud55c \ud06c\uae30\ub97c \uc9c0\uc815\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 9~10\ubc88 \ucf54\ub4dc\ub294 div\uc758 \uc0c9\uc0c1\uacfc \uadf8\ub9bc\uc790\ub97c \ud45c\uc2dc\ud558\ub3c4\ub85d \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. 12\ubc88\uc740 \ucd5c\ucd08\uc758 div\uc758 \uc704\uce58\ub97c (0, 0) \uc88c\ud45c\ub85c \uc9c0\uc815\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. 13\ubc88 \ucf54\ub4dc\uac00 \ubc14\ub85c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc704\ud55c transition(\uc804\ud658)\uc744 \uc9c0\uc815\ud558\uace0 \uc788\ub294\ub370, transform\uc5d0 \ub300\ud574 1\ucd08(1ms) \ub3d9\uc548 \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc774\ub8e8\uc5b4\uc9c0\ub3c4\ub85d \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \uc5ec\uae30\uc11c\ub294 \uc544\uc9c1 transform\uc5d0 \ub300\ud574 \uc5b4\ub5a4 \uc804\ud658\uc774 \uc774\ub8e8\uc5b4\uc9c8\uc9c0\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub294 \uc5c6\uc2b5\ub2c8\ub2e4. \uc774\ub5a4 \uc804\ud658\uc774 \uc774\ub8e8\uc5b4\uc9c0\ub294 \uc2dc\uc810\uc740 \uc774 div\ub97c \ud074\ub9ad\ud560 \ub54c\uc778\ub370, \ub2e4\uc74c\uc758 \ucf54\ub4dc\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n
\r\nvar box = document.querySelector('.box');\r\n\r\nbox.addEventListener('click', function () {\r\n    box.classList.toggle('move');\r\n});\r\n\r\nbox.addEventListener('transitionend', function () {\r\n    alert('\uc774\ub3d9 \uc644\ub8cc');\r\n}, false);\r\n<\/pre>\n
3\ubc88 \ucf54\ub4dc\uc5d0\uc11c div\uc5d0 \ub300\ud55c \ud074\ub9ad \uc774\ubca4\ud2b8\ub97c \uc9c0\uc815\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc989, div\uc5d0 move\ub77c\ub294 \ud074\ub798\uc2a4\ub97c \ud1a0\uae00\ub9c1\ud558\uace0 \uc788\ub294\ub370\uc694. \ud1a0\uae00\ub9c1\uc740 \ud574\ub2f9 \uac12\uc774 \uc9c0\uc815\ub418\uc5b4 \uc788\uc73c\uba74 \uc81c\uac70\ud558\uace0, \uc9c0\uc815\ub418\uc5b4 \uc788\uc9c0 \uc54a\uc73c\uba74 \uc9c0\uc815\ud558\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4. move \ud074\ub798\uc2a4\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. (\ucc38\uace0\ub85c 7\ubc88 \ucf54\ub4dc\ub294 \ud558\ub098\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc644\ub8cc\ub418\uc5c8\uc744 \ub54c \ud638\ucd9c\ub418\ub294 \ud568\uc218\ub97c \uc9c0\uc815\ud558\uace0 \uc788\uc74c)<\/p>\n
\r\n    .box.move {\r\n        transform: translate(400px, 0);\r\n    }\r\n<\/pre>\n
\ubcf4\uc2dc\uba74 transform \uc18d\uc131\uc5d0 \ub300\ud574\uc11c x\ucd95\uc73c\ub85c 400px\ub85c \ubcc0\uacbd\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
\uc774\uae00\uc740 \uc6f9\uc5d0\uc11c \ud654\uba74\uc5d0 \ud45c\uc2dc\ub41c \uac1d\uccb4\uc5d0 \ub300\ud55c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\ub294 \ubc29\uc2dd \uc911 Transition \ubc29\uc2dd\uc5d0 \ub300\ud55c \uc815\ub9ac\uc785\ub2c8\ub2e4. \ud604\ub300\uc758 UI\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud55c\ub2e4\ub294 \uac83\uc740 \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc601\uac10\uc744 \ubd88\uc5b4 \ub123\uc744 \uc218 \uc788\ub2e4\ub294 \uc810\uc5d0 \ub9e4\uc6b0 \ucca0\ud559\uc801\uc774\uace0 \uc138\ub828\ub41c \ubc29\ubc95\uc774\ub77c\uace0 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uba3c\uc800 \uc544\ub798\uc758 \ud654\uba74\uc5d0\uc11c ‘\ud130\uce58\ubbf8!’ \ud14d\uc2a4\ud2b8(div \uc694\uc18c)\ub97c \ud074\ub9ad\ud574 \ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4. [xyz-ihs snippet=”Transition”] \ud074\ub9ad\ud560 \ub54c\ub9c8\ub2e4 \uc88c\uc5d0\uc11c \uc6b0\ub85c.. \uc6b0\uc5d0\uc11c \uc88c\ub85c \uc774\ub3d9\ud558\ub294 \uac83\uc744 \uc0b4\ud3b4\ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. … <\/p>\n
\ub354 \ubcf4\uae30 “\uc6f9 \uc560\ub2c8\uba54\uc774\uc158 1\/3 \u3161 Transition \ubc29\uc2dd”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-2276","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2276"}],"version-history":[{"count":1,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2276\/revisions"}],"predecessor-version":[{"id":2715,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2276\/revisions\/2715"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2276"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}