2024-11-27

2024-11-27 13:07:13 +09:00
parent a356a36eb0
commit 75cf69e82f
2 changed files with 45 additions and 1 deletions
--- a/Writerside/topics/Transition.md
+++ b/Writerside/topics/Transition.md
@@ -16,5 +16,8 @@ div {

 ## 트랜지션 완료 이벤트
 ```javascript
-element.addEventListener('transitionend', function(propertyName, elapsedTime){}, true);
+element.addEventListener('transitionend', function(event){
+    console.log(event.propertyName);
+    console.log(event.elapsedTime);
+}, true);
 ```
--- a/src/transition.html
+++ b/src/transition.html
@@ -0,0 +1,41 @@
+<!--
+  ~ Copyright (c) 2024. Elex. All Rights Reesrved.
+  ~ https://www.elex-project.com/
+  -->
+
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Transition</title>
+    <style>
+        html {
+            box-sizing: border-box;
+        }
+        .box{
+            width: 100px;
+            height: 100px;
+            background-color: red;
+            transition-property: width, background-color;
+            transition-duration: 1s;
+        }
+        .box:hover{
+            width: 200px;
+            background-color: yellow;
+        }
+    </style>
+
+</head>
+<body>
+    <div class="box">
+        <p>Hello</p>
+    </div>
+    <script>
+        document.querySelector('.box').addEventListener("transitionend", (evt) => {
+            console.log(evt.propertyName);
+            console.log(evt.elapsedTime);
+        }, true);
+    </script>
+</body>
+</html>