Как я использую преобразования CSS для скольжения отделения на экране?

Question

Как я использую преобразования CSS для скольжения отделения на экране?

Моя веб-страница имеет два отделения на нем, A и B. Отделение A видимо, Отделение B скрыто.

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

Я нашел, что анимации jQuery являются очень медленными на iPad, таким образом, я хочу использовать анимации CSS WebKit вместо этого, которым я верю, представляются в аппаратных средствах. Как я делаю это?

8

css ipad safari html5 webkit

задан kennytm 6 June 2010 в 19:33

1 ответ

Другие вопросы по тегам:

css ipad safari html5 webkit

Похожие вопросы:

score 9 · Accepted Answer

Ниже приведен пример, показывающий, как это сделать с помощью анимации webkit. Вы также можете прочитать эту статью для получения дополнительной информации: http://webkit.org/blog/138/css-animation/

Закругленные углы нужны только для того, чтобы показать, что страница перемещается за пределы экрана, а не просто меняет ширину.

Основная идея заключается в анимировании свойства left 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>