Jak używać transformacji CSS do przesuwania elementu div na ekranie?

Moja strona internetowa zawiera dwa elementy div, A i B. DIV A jest widoczny, DivB jest ukryty.Jak używać transformacji CSS do przesuwania elementu div na ekranie?

Gdy użytkownik kliknie łącze w dziale A, chcę "wysunąć" div A z ekranu (pozostawiając za lewą krawędź) i przesunąć działkę B na ekranie (wprowadzanie przez prawą krawędź).

Zauważyłem, że animacje jquery są bardzo powolne na iPadzie, więc chcę użyć animacji CSS webkita, które, jak sądzę, są renderowane w sprzęcie. Jak mam to zrobic?

Źródło

2010-06-06 Colen

Tylko dla persnickety, to CSS * przejścia * lub animacje CSS. Transformacje CSS są po zmianie kształtu obiektu. –

@ PaulD.Waite transform: translate (x, y) zmienia pozycję, a nie tylko kształt. Dobrze? – MdaG

@MdaG: ah tak, bardzo prawdziwe. –

Poniżej znajduje się przykład pokazujący, jak to zrobić w przypadku animacji webkit. Możesz również przeczytać ten artykuł, aby uzyskać więcej informacji: http://webkit.org/blog/138/css-animation/

Zaokrąglone narożniki służą tylko do pokazania, że strona porusza się poza ekranem, a nie tylko zmienia szerokość.

Głównym celem jest animacja lewej właściwości CSS i użycie funkcji div kontenera do przycinania.

<!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>

Źródło

2010-06-06 23:24:42 tstanis

Twój przykład tutaj z [jsfiddle] (http://jsfiddle.net/onigetoc/bB5sK/ "jsfiddle"). – Gino

Aby mieć #left div "przesuń", musisz podać "left: 0px;" początkowo: http://jsfiddle.net/7QWGj/ – Harmon

Jak używać transformacji CSS do przesuwania elementu div na ekranie?

Odpowiedz

Powiązane problemy