Question

저는 css3 애니메이션을 원했습니다. 특히 "전달"이라고 표시하면 실제로 요소의 변형이 변경됩니다. 그러나 그렇지 않습니다.

참조 : http://jsfiddle.net/foreyez/3b3f6oyx/

--- 사용의 크롬 브라우저 ---

HTML :

<div style='position:fixed;bottom:10px'> 
<button onclick='down()'>Go Down</button> 
<button onclick='right()'>Go Right</button> 
</div> 

CSS :

@-webkit-keyframes animdownkf { 
    0% { } 
    100% { transform: translateY(100px); } 
} 

@-webkit-keyframes animrightkf { 
    0% { } 
    100% { transform: translateX(100px); } 
} 

#box { 
    width:50px; 
    height:50px; 
    background:black; 
} 

button { 
    height:100px; 
    width:100px; 
} 
.animdown { 
     -webkit-animation:1s animdownkf forwards; 
} 

.animright { 
     -webkit-animation:1s animrightkf forwards; 
} 

JAVASCR IPT : 나는 그것을 할 싶습니다 무엇

function down() { 
     $('#box').removeClass('animright'); 
     $('#box').addClass('animdown'); 
} 

function right() { 
     $('#box').removeClass('animdown'); 
     $('#box').addClass('animright'); 
} 

상태를 유지, 그래서 내가 클릭하면 그 아래로 갈 것 "내려 가서"내가 클릭하면 다음은 오른쪽에서 갈 것 "우측 이동" 현재 위치는 LOCATION입니다.

하지만 그렇게하지 않는 것 같습니다. css3 전환은이를 수행 할 수 있지만 키 프레임을 사용해야하므로 특별히 css3 애니메이션이 필요하다는 것을 알고 있습니다. 100 %의 사람들이 실제 요소의 스타일을 변경하기를 바랍니다. 이것을 할 수있는 방법이 있습니까?

Answer 1

당신은 그것을 위해 jQuery를 필요 ...

http://jsfiddle.net/swestphal/9kanuLc5/

<script type="text/javascript"> 
$(document).ready(function() { 

$('#moveright').click(function() { 
    $('#box').animate({ 
    'marginLeft' : "+=100px" //moves right 
    }); 
}); 

$('#movedown').click(function() { 
    $('#box').animate({ 
    'marginTop' : "+=100px" //moves down 
    }); 
}); 


    }); 
    </script> 

    <button id="moveright">Move right</button> <button id="movedown">Move  Down</button><div id="box" style="position:absolute;">x</div>