Martin`s Work

[DOM 이벤트] animationEvent & transitionEvent 본문

Javascript

[DOM 이벤트] animationEvent & transitionEvent

Martin`s Work 2017. 2. 28. 21:34

1. animationName


CSS 애니메이션의 이름을 반환한다. Internet Explorer 기준 IE10 이상 브라우저부터 지원한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 <style>
    #div1{ 
width:100px; 
height:100px; 
background-color:red; 
-webkit-animation-name:moving; 
-webkit-animation-duration:5s; 
animation-name:moving; 
animation-duration:5s; 
}
    @keyframes moving{
        from{ width:100px; height:100px; }
        to{ width:200px; height:200px; }
    }
    @-webkit-keyframes moving{
        from{ width:100px; height:100px; }
        to{ width:200px; height:200px; }
    }
</style>
 <div id="div1">
 </div>
 <script>
    (function(event){
        var div = document.getElementById("div1");
 
        div.addEventListener("animationstart", myStartFunction);
 
        function myStartFunction(event) {
            div.innerHTML = "The animation-name is: " + event.animationName;
        }
    }());
</script>
 
cs

 

2. elapseTime


css 애니메이션이 재생된 시간을 반환한다. 

아래의 소스 처럼 계속해서 반복하는 경우 elapseTime은 계속해서 증가한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 <style>
    #div1{ 
        width:100px; 
        height:100px; 
        background-color:red; 
        -webkit-animation:moving 4s infinite; 
        animation-name:moving 4s infinite; 
    }
    @keyframes moving{
        from{ width:100px; height:100px; }
        to{ width:200px; height:200px; }
    }
    @-webkit-keyframes moving{
        from{ width:100px; height:100px; }
        to{ width:200px; height:200px; }
    }
</style>
 <div id="div1">
 </div>
 <script>
    (function(event){
        var div = document.getElementById("div1");
 
        div.addEventListener("animationiteration", myStartFunction);
 
        function myStartFunction(event) {
            div.innerHTML = "The animation-time is: " + event.elapsedTime;
        }
    }());
</script>
 
cs


Comments