Как использовать CSS-преобразования для перемещения div на экране? - PullRequest
Новая
       16

Как использовать CSS-преобразования для перемещения div на экране?

8 голосов
/ 06 июня 2010

На моей веб-странице есть два div, A и B. Div A виден, Div B скрыт.

Когда пользователь щелкает ссылку в div A, я хочу «сдвинуть» div Aза пределами экрана (выход через левый край) и сдвиньте div B на экране (вход через правый край).

Я обнаружил, что анимации jquery на ipad очень медленные, поэтому я хочу использоватьВместо этого CSS анимации webkit, которые, как я считаю, визуализируются аппаратно.Как мне это сделать?

1 Ответ

9 голосов
/ 07 июня 2010

Ниже приведен пример, показывающий, как это сделать с помощью анимации webkit. Вы также можете прочитать эту статью для получения дополнительной информации: 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>
...