From 3f7fd524042c564373a72c3805fdcaa2d6483f15 Mon Sep 17 00:00:00 2001 From: alattalatta Date: Sat, 19 Feb 2022 14:38:42 +0900 Subject: Update AnimationEvent docs (#3907) * Update AnimationEvent docs * Add AnimationEvent.elapsedTime * Fix omitted inline code for param name * Add omitted default value desc * Clarify `pseudoElement` desc Co-authored-by: Sungwoo Park --- .../api/animationevent/animationevent/index.html | 76 --------------------- .../web/api/animationevent/animationevent/index.md | 55 +++++++++++++++ .../api/animationevent/animationname/index.html | 53 --------------- .../web/api/animationevent/animationname/index.md | 36 ++++++++++ .../ko/web/api/animationevent/elapsedtime/index.md | 36 ++++++++++ files/ko/web/api/animationevent/index.html | 78 ---------------------- files/ko/web/api/animationevent/index.md | 50 ++++++++++++++ 7 files changed, 177 insertions(+), 207 deletions(-) delete mode 100644 files/ko/web/api/animationevent/animationevent/index.html create mode 100644 files/ko/web/api/animationevent/animationevent/index.md delete mode 100644 files/ko/web/api/animationevent/animationname/index.html create mode 100644 files/ko/web/api/animationevent/animationname/index.md create mode 100644 files/ko/web/api/animationevent/elapsedtime/index.md delete mode 100644 files/ko/web/api/animationevent/index.html create mode 100644 files/ko/web/api/animationevent/index.md diff --git a/files/ko/web/api/animationevent/animationevent/index.html b/files/ko/web/api/animationevent/animationevent/index.html deleted file mode 100644 index 4647191202..0000000000 --- a/files/ko/web/api/animationevent/animationevent/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: AnimationEvent() -slug: Web/API/AnimationEvent/AnimationEvent -tags: - - API - - CSSOM - - Constructor - - Experimental - - Reference - - Web Animations -translation_of: Web/API/AnimationEvent/AnimationEvent ---- -
{{APIRef("Web Animations")}}{{SeeCompatTable}}
- -

AnimationEvent() 생성자는 애니메이션 이벤트인 {{domxref("AnimationEvent")}} 객체를 새로 만들어 리턴합니다. 

- -

문법

- -
animationEvent = new AnimationEvent(type, {animationName: aPropertyName,
-                                           elapsedTime  : aFloat,
-                                           pseudoElement: aPseudoElementName});
-
- -

매개 변수

- -

AnimationEvent() 생성자는 인자를 {{domxref("Event.Event", "Event()")}} 객체로부터 상속받습니다. 

- -
-
type
-
{{domxref("DOMString")}}는 AnimationEvent 타입의 이름을 나타냅니다. 대소문자를 구별하며, 'animationstart', 'animationend', 또는 'animationiteration' 와 같이 쓸 수 있습니다.
-
animationName {{optional_inline}}
-
{{domxref("DOMString")}}는 {{cssxref("animation-name")}}의 변화와 관련된 CSS 프로퍼티 값을 포함합니다. 디폴트 값은 "" 입니다.
-
elapsedTime {{optional_inline}}
-
-

float 타입 값이며 이벤트가 발생할 시, 애니메이션이 정지했던 시간을 제외하고 실제 실행되었던 시간을 초 단위로 받습니다. "animationstart" 이벤트의 경우, {{cssxref("animation-delay")}}의 네비게이트 값이 존재하지 않는다면 elapsedTime은 0.0이고, 네비게이트 값이 존재한다면 elapsedTime이 (-1 * delay)값이 되고 이벤트가 발생하게 됩니다. 디폴트 값은 0.0입니다.

-
-
pseudoElement {{optional_inline}}
-
"::"로 시작하는 {{domxref("DOMString")}} 이고, 애니메이션이 실행되는 pseudo-element의 이름을  포함합니다. 애니메이션이 pseudo-element에서 실행되지 않고, 원소 자체에서 실행된다면 빈 스트링 : ""을 명시하십시오. 디폴트 값은 "" 입니다.
-
- -

리턴 값

- -

주어진 옵션에 의해 초기화된 {{domxref("AnimationEvent")}}

- -

상세

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }}{{ Spec2('CSS3 Animations')}}초기 정의
- -

브라우저 호환성

- -
-

{{Compat("api.AnimationEvent.AnimationEvent")}}

-
- -

함께 보기

- - diff --git a/files/ko/web/api/animationevent/animationevent/index.md b/files/ko/web/api/animationevent/animationevent/index.md new file mode 100644 index 0000000000..1974b687cc --- /dev/null +++ b/files/ko/web/api/animationevent/animationevent/index.md @@ -0,0 +1,55 @@ +--- +title: AnimationEvent() +slug: Web/API/AnimationEvent/AnimationEvent +tags: + - API + - AnimationEvent + - CSSOM + - Constructor + - Reference + - Web Animations +browser-compat: api.AnimationEvent.AnimationEvent +translation_of: Web/API/AnimationEvent/AnimationEvent +--- +{{APIRef("Web Animations API")}} + +**`AnimationEvent()`** 생성자는 애니메이션에 관련된 이벤트를 나타내는 {{domxref("AnimationEvent")}} 객체를 새로 생성하고 반환합니다. + +## 구문 + +```js +animationEvent = new AnimationEvent(type, {animationName: aPropertyName, + elapsedTime : aFloat, + pseudoElement: aPseudoElementName}); +``` + +### 매개변수 + +`AnimationEvent()` 생성자는 {{domxref("Event.Event", "Event()")}} 생성자의 매개변수도 상속합니다. + +- `type` + - : `AnimationEvent`의 유형을 나타내는 대소문자 구별 {{domxref("DOMString")}}입니다. `'animationstart'`, `'animationend'`, `'animationiteration'`을 사용할 수 있습니다. +- `animationName` {{optional_inline}} + - : 트랜지션에 관련된 {{cssxref("animation-name")}} CSS 속성 값을 나타내는 {{domxref("DOMString")}}입니다. 기본 값은 `""`입니다. +- `elapsedTime` {{optional_inline}} + - : 이벤트가 발생한 시점까지 애니메이션이 재생된 총 시간을 나타내는 `float` 값입니다. 초 단위며, 애니메이션이 일시정지된 시간은 제외합니다. `"animationstart"` 이벤트의 `elapsedTime`은 {{cssxref("animation-delay")}}의 값이 음수인 경우에만 `(-1 * delay)`가 되고, 그 외에는 `0.0`입니다. 기본 값은 `0.0`입니다. +- `pseudoElement` {{optional_inline}} + - : 애니메이션이 재생된 [의사 요소](/ko/docs/Web/CSS/Pseudo-elements)의 이름을 값으로 가진 {{domxref("DOMString")}}입니다. `'::'`으로 시작합니다. 의사 요소가 아닌 요소에서 재생된 애니메이션에서는 빈 문자열(`''`)을 반환합니다. + +### 반환 값 + +지정한 옵션에 따라 새롭게 생성한 {{domxref("AnimationEvent")}}. + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [CSS 애니메이션 사용하기](/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- 애니메이션 관련 CSS 속성과 @규칙: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}} +- 이 생성자가 속한 {{domxref("AnimationEvent")}} 인터페이스. \ No newline at end of file diff --git a/files/ko/web/api/animationevent/animationname/index.html b/files/ko/web/api/animationevent/animationname/index.html deleted file mode 100644 index 8d63e43708..0000000000 --- a/files/ko/web/api/animationevent/animationname/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: AnimationEvent.animationName -slug: Web/API/AnimationEvent/animationName -tags: - - API - - AnimationEvent - - CSSOM - - 레퍼런스 - - 실험중 - - 웹 애니메이션 - - 프로퍼티 -translation_of: Web/API/AnimationEvent/animationName ---- -

{{SeeCompatTable}}{{ apiref("Web Animations API") }}

- -

읽기 전용 프로퍼티인 AnimationEvent.animationName는 변화(transition)과 관련된 CSS 프로퍼티 {{cssxref("animation-name")}}의 값을 포함하는 {{domxref("DOMString")}}입니다.

- -

문법

- -
name = AnimationEvent.animationName
- -

명세서

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName') }}{{ Spec2('CSS3 Animations')}}초기 정의.
- -

브라우저 호환성

- - - -

{{Compat("api.AnimationEvent.animationName")}}

- -

함께 보기

- - diff --git a/files/ko/web/api/animationevent/animationname/index.md b/files/ko/web/api/animationevent/animationname/index.md new file mode 100644 index 0000000000..83f982eca5 --- /dev/null +++ b/files/ko/web/api/animationevent/animationname/index.md @@ -0,0 +1,36 @@ +--- +title: AnimationEvent.animationName +slug: Web/API/AnimationEvent/animationName +tags: + - API + - AnimationEvent + - CSSOM + - Property + - Reference + - Web Animations +browser-compat: api.AnimationEvent.animationName +translation_of: Web/API/AnimationEvent/animationName +--- +{{APIRef("Web Animations API")}} + +**`AnimationEvent.animationName`** 읽기 전용 속성은 트랜지션에 관련된 {{cssxref("animation-name")}} CSS 속성 값을 나타내는 {{domxref("DOMString")}}입니다. + +## 구문 + +```js +name = AnimationEvent.animationName +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [CSS 애니메이션 사용하기](/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- 애니메이션 관련 CSS 속성과 @규칙: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}} +- 이 속성이 속한 {{domxref("AnimationEvent")}} 인터페이스. \ No newline at end of file diff --git a/files/ko/web/api/animationevent/elapsedtime/index.md b/files/ko/web/api/animationevent/elapsedtime/index.md new file mode 100644 index 0000000000..a7872e400a --- /dev/null +++ b/files/ko/web/api/animationevent/elapsedtime/index.md @@ -0,0 +1,36 @@ +--- +title: AnimationEvent.elapsedTime +slug: Web/API/AnimationEvent/elapsedTime +tags: + - API + - AnimationEvent + - CSSOM + - Property + - Reference + - Web Animations +browser-compat: api.AnimationEvent.elapsedTime +translation_of: Web/API/AnimationEvent/elapsedTime +--- +{{APIRef("Web Animations API")}} + +**`AnimationEvent.elapsedTime`** 읽기 전용 속성은 이벤트가 발생한 시점까지 애니메이션이 재생된 총 시간을 나타내는 `float` 값입니다. 초 단위며, 애니메이션이 일시정지된 시간은 제외합니다. {{event("animationstart")}} 이벤트의 `elapsedTime`은 {{cssxref("animation-delay")}}의 값이 음수인 경우에만 `(-1 * delay)`가 되고, 그 외에는 `0.0`입니다. + +## 구문 + +```js +time = AnimationEvent.elapsedTime +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [CSS 애니메이션 사용하기](/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- 애니메이션 관련 CSS 속성과 @규칙: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}} +- 이 속성이 속한 {{domxref("AnimationEvent")}} 인터페이스. \ No newline at end of file diff --git a/files/ko/web/api/animationevent/index.html b/files/ko/web/api/animationevent/index.html deleted file mode 100644 index 757e9a911e..0000000000 --- a/files/ko/web/api/animationevent/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: AnimationEvent -slug: Web/API/AnimationEvent -tags: - - API - - Experimental - - Interface - - Reference - - Web Animations -translation_of: Web/API/AnimationEvent ---- -

{{SeeCompatTable}}{{APIRef("Event")}}

- -

AnimationEvent 인터페이스는 에니메이션과 관련된 정보를 제공하는 이벤트를 나타냅니다.

- -

{{InheritanceDiagram}}

- -

생성자

- -
-
{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}
-
주어진 매개변수로 AnimationEvent를 생성합니다.
-
- -

속성

- -

{{domxref("Event")}}의 속성을 상속합니다.

- -
-
{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}
-
트랜지션과 관련된 {{cssxref("animation-name")}} CSS 속성의 값을 가진 {{domxref("DOMString")}}입니다.
-
{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}
-
애니메이션이 재생된 총 시간을 나타내는 실수입니다. 초 단위로, 애니메이션이 일시정지된 시간은 제외합니다. animationstart 이벤트의 elapsedTime은 0.0이지만, {{cssxref("animation-delay")}} 값이 음수였다면 대신 (-1 * delay)를 값으로 가집니다.
-
{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}
-
애니메이션이 재생 중인 의사 요소의 이름을 값으로 가진 {{domxref("DOMString")}}입니다. '::'으로 시작합니다. 애니메이션이 일반 요소에서 재생 중이라면 빈 문자열 ''을 반환합니다.
-
- -
-
- -

메서드

- -

{{domxref("Event")}}의 메서드를 상속합니다.

- -
-
{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}
-
삭제 예정 메서드 {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}를 사용해 AnimationEvent를 초기화합니다.
-
- -

명세

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}{{ Spec2('CSS3 Animations') }}Initial definition.
- -

브라우저 호환성

- -

{{Compat("api.AnimationEvent")}}

- -

같이 보기

- - diff --git a/files/ko/web/api/animationevent/index.md b/files/ko/web/api/animationevent/index.md new file mode 100644 index 0000000000..404bc584be --- /dev/null +++ b/files/ko/web/api/animationevent/index.md @@ -0,0 +1,50 @@ +--- +title: AnimationEvent +slug: Web/API/AnimationEvent +tags: + - API + - Experimental + - Interface + - Reference + - Web Animations +browser-compat: api.AnimationEvent +translation_of: Web/API/AnimationEvent +--- +{{APIRef("Web Animations API")}} + +**`AnimationEvent`** 인터페이스는 [에니메이션](/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations)과 관련된 정보를 제공하는 이벤트를 나타냅니다. + +{{InheritanceDiagram}} + +## 생성자 + +- {{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}} + - : 주어진 매개변수로 `AnimationEvent`를 생성합니다. + +## 속성 + +{{domxref("Event")}} 인터페이스의 속성을 상속합니다. + +- {{domxref("AnimationEvent.animationName")}} {{readonlyInline}} + - : 애니메이션을 생성한 {{cssxref("animation-name")}}의 값을 가지는 {{domxref("DOMString")}}입니다. +- {{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}} + - : 이 이벤트가 발생한 시점까지 애니메이션이 재생된 총 시간을 나타내는 `float` 값입니다. 초 단위며, 애니메이션이 일시정지된 시간은 제외합니다. `animationstart` 이벤트의 `elapsedTime`은 {{cssxref("animation-delay")}}의 값이 음수인 경우에만 `(-1 * delay)`가 되고, 그 외에는 `0.0`입니다. +- {{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}} + - : 애니메이션이 재생 중인 [의사 요소](/ko/docs/Web/CSS/Pseudo-elements)의 이름을 값으로 가진 {{domxref("DOMString")}}입니다. `'::'`으로 시작합니다. 애니메이션이 일반 요소에서 재생 중이라면 빈 문자열(`''`)을 반환합니다. + +## 메서드 + +{{domxref("Event")}} 인터페이스의 메서드를 상속합니다. + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [CSS 애니메이션 사용하기](/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- 애니메이션 관련 CSS 속성과 @규칙: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}} -- cgit v1.2.3-54-g00ecf