CSS 변환을 사용하여 화면에서 div를 슬라이드하는 방법은 무엇입니까?

내 웹 페이지에는 A와 B의 두 개의 div가 있습니다. Div A가 표시되고 Div B가 숨겨집니다.CSS 변환을 사용하여 화면에서 div를 슬라이드하는 방법은 무엇입니까?

사용자가 div A의 링크를 클릭하면 div A를 왼쪽 가장자리를 통해 떠나는 화면에서 "슬라이드"하고 화면의 div B를 오른쪽 가장자리를 통해 밀어 넣고 싶습니다.

jquery 애니메이션이 ipad에서 매우 느리다는 것을 알았습니다. 대신 하드웨어로 렌더링 된 것으로 생각되는 webkit CSS 애니메이션을 사용하고 싶습니다. 어떻게해야합니까?

출처

2010-06-06 Colen

그냥 persnickety 되려면, 그것은 CSS * 전환 * 또는 CSS 애니메이션입니다. CSS 변형은 객체의 모양을 변경할 때 발생합니다. –

@ PaulD.Waite transform : translate (x, y)는 모양이 아니라 위치 만 변경합니다. 권리? – MdaG

@MdaG : 예, 매우 사실입니다. –

다음은 웹킷 애니메이션에서이를 수행하는 방법을 보여주는 예입니다. 더 많은 배경에 대해이 기사를 읽을 수도 있습니다. http://webkit.org/blog/138/css-animation/

둥근 모서리는 단지 너비를 변경하는 것이 아니라 페이지가 화면 밖으로 벗어나고 있음을 나타냅니다.

주요 아이디어는 왼쪽 CSS 속성에 애니메이션을 적용하고 컨테이너 div를 사용하여 클리핑을 수행하는 것입니다.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
    width: 50px; 
    height: 50px; 
    -webkit-border-radius: 15px; 
} 

#left { 
    position: absolute; 
    background-color: blue; 
    -webkit-transition: left 1s ease-in; 
} 

#right { 
    position: absolute; 
    left: 50px; 
    background-color: green; 
    -webkit-transition: left 1s ease-in; 
} 

#left.animate { 
    left: -50px; 
} 

#right.animate { 
    left: 0px; 
} 

#container { 
    position: relative; 
    overflow:hidden; 
} 
</style> 
<script> 

function animate() { 
    document.getElementById('left').className = 'animate'; 
    document.getElementById('right').className = 'animate'; 
} 
</script> 
</head> 
<body> 
<div id='container'><div id='left'></div><div id='right'></div></div> 
<input type='button' onclick='animate();' value='Animate!'></input> 
</body> 
</html>

출처

2010-06-06 23:24:42 tstanis

[jsfiddle] (http://jsfiddle.net/onigetoc/bB5sK/ "jsfiddle")을 사용하여 여기에 예제를 작성하십시오. – Gino

#left div "슬라이드"를 사용하지 않으려면 "왼쪽 : 0px;"로 지정해야합니다. 처음에 : http://jsfiddle.net/7QWGj/ – Harmon

CSS 변환을 사용하여 화면에서 div를 슬라이드하는 방법은 무엇입니까?

답변

관련 문제