problems with CSS3 transform and transition
user clicks menu option:
- current contents of div swirl, get small and disappear
- those contents are replaced with other contents via replaceChild
- the new contents start small, swirl and show
if the old and new contents are the same, it works fine; but if different, the swirl down works but the new contents simply appear full size after 500ms
when it works, the effect is quite nice
here's a complete working example:
<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>
took the coward's way out and, instead of dom assignment, copied the innerHTML of the new dom to the existent dom, and rotated it
cur_dom.innerHTML = new_dom.innerHTML;
cur_dom.style.style.webkitTransform = "rotate(0deg)";
works just fine. but still ugly.
The problem is that the new element you put in place isn't rotated. You basically solved the problem, and it's not ugly, but the correct thing to do. You can also leave out the generation of the "replacement" DIVs and just change the content of the original one:
cur_dom.innerHTML = (no==1) ? 'testing1' : 'testing2';
cur_dom.style.webkitTransform = "rotate(0deg)";
Working example: http://jsfiddle.net/CTxVu/
加载中,请稍侯......
精彩评论