elex/css-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2024-11-27

Browse Source
This commit is contained in:
Elex
2024-11-27 13:07:13 +09:00
parent a356a36eb0
commit 75cf69e82f
2 changed files with 45 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Writerside/topics/Transition.md
View File

@@ -16,5 +16,8 @@ div {
## 트랜지션 완료 이벤트 ## 트랜지션 완료 이벤트
```javascript ```javascript
element.addEventListener('transitionend', function(propertyName, elapsedTime){}, true); element.addEventListener('transitionend', function(event){
console.log(event.propertyName);
console.log(event.elapsedTime);
}, true);
``` ```

41
src/transition.html Normal file
View File

@@ -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>