пользователь щелкает опцию меню:
- текущее содержимое div swirl, становится меньше и исчезает
- это содержимое заменяется другим содержимым через replaceChild
- новое содержимое начинается с малого, вихря и отображается
, если старое и новое содержимое совпадают, оно работает нормально;но если это не так, закрутка вниз работает, но новое содержимое просто отображается в полном размере через 500 мс
, когда оно работает, эффект довольно приятный
вот полный рабочий пример:
<html>
<head>
<script>
var d1 = document.createElement('div');
d1.className = 't';
d1.innerHTML = 'testing1';
var d2 = document.createElement('div');
d2.className = 't';
d2.innerHTML = 'testing2';
function test(no) {
// current
var cur_dom = document.body.getElementsByTagName('div')[0];
cur_dom.style.webkitTransform = "rotate(180deg) scale(0.1)";
setTimeout( step2, 500 );
// new
function step2() {
// replace node with part
var new_dom = (no==1) ? d1 : d2;
cur_dom.parentNode.replaceChild(new_dom,cur_dom);
new_dom.style.webkitTransform = "rotate(0deg)";
}
return false;
};
</script>
<style>
div { border: 1px solid red; }
div.t { -webkit-transform: rotate(180deg) scale(0.1);
-webkit-transition: -webkit-transform ease-in-out 500ms; }
</style>
</head>
<body>
<a href='#' onclick='return test(1)'>test1</a>
<a href='#' onclick='return test(2)'>test2</a>
<div class='t'>this will be replaced</div>
</body>
</html>