CSS3转换和过渡问题

Question

用户单击菜单选项：

div旋流的当前内容，变小并消失
这些内容通过replaceChild被其他内容替换
新内容从小处开始，旋转并显示

如果新旧内容相同，则可以正常工作； 但是，如果不同，则向下旋转会起作用，但是新内容在500ms之后只会显示为完整大小

当它起作用时，效果相当不错

这是一个完整的工作示例：

<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 个解决方案

解决方案1
1 2011-03-31 13:21:07

解决方案2
0 2011-04-01 10:25:05

CSS3转换和过渡问题

问题描述

2 个解决方案

解决方案1 1 2011-03-31 13:21:07

解决方案2 0 2011-04-01 10:25:05

解决方案1
1 2011-03-31 13:21:07

解决方案2
0 2011-04-01 10:25:05