Question

用户点击菜单选项：

div的当前内容漩涡，变小并消失
通过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>

Answer 1

采取懦夫的方式，而不是dom任务，将新dom的innerHTML复制到现有的dom，并旋转它

cur_dom.innerHTML = new_dom.innerHTML;
cur_dom.style.style.webkitTransform = "rotate(0deg)";

工作得很好。但还是很难看。

Answer 2

问题是你放置的新元素没有旋转。你基本上解决了这个问题，并不是很难看，而是正确的做法。您也可以省略“替换”DIV的生成，只需更改原始DIV的内容：

        cur_dom.innerHTML = (no==1) ? 'testing1' : 'testing2';
        cur_dom.style.webkitTransform = "rotate(0deg)";

工作示例：http://jsfiddle.net/CTxVu/

CSS3转换和转换的问题

2 个答案: