From a356a36eb045ace13a3a93edd27c612bb778843d Mon Sep 17 00:00:00 2001 From: Elex Date: Wed, 27 Nov 2024 12:56:21 +0900 Subject: [PATCH] 2024-11-27 --- Writerside/topics/Flexbox.md | 2 +- Writerside/topics/Transition.md | 14 ++++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/Writerside/topics/Flexbox.md b/Writerside/topics/Flexbox.md index 73c2dc9..c3bea7c 100644 --- a/Writerside/topics/Flexbox.md +++ b/Writerside/topics/Flexbox.md @@ -30,7 +30,7 @@ div { * `justify-content` : 주축을 기준으로 플렉스 아이템을 어떻게 정렬할 것인지를 지정합니다. * start | end | flex-start | flex-end | center | left | right | normal | baseline | space-between | space-around | space-evenly | stretch | safe | unsafe -## 플랙스 아이템 +## 플렉스 아이템 * `flex` = `flex-grow` + `flex-shrink` + `flex-basis` * `flex-grow` : 플레스 컨테이너 내부에서 할당 가능한 공간의 정도를 비례값으로 지정합니다. diff --git a/Writerside/topics/Transition.md b/Writerside/topics/Transition.md index 03aa656..459eb7a 100644 --- a/Writerside/topics/Transition.md +++ b/Writerside/topics/Transition.md @@ -1,14 +1,20 @@ # Transition * `transition` -* `transition-property` -* `transition-duration` -* `transition-timing-function` -* `transition-delay` +* `transition-property` : 트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다. 여기에 나열한 속성만 트랜지션하는 동안 움직입니다. +* `transition-duration` : 트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다. +* `transition-timing-function` : 속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다. + - ease | linear | step-end | steps(4, end) +* `transition-delay` : 속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다. ```CSS div { transition: ; } +``` + +## 트랜지션 완료 이벤트 +```javascript +element.addEventListener('transitionend', function(propertyName, elapsedTime){}, true); ``` \ No newline at end of file