Javascript CSS3转换和转换的问题_Javascript_Css

Javascript CSS3转换和转换的问题

javascript css

Javascript CSS3转换和转换的问题,javascript,css,Javascript,Css,用户单击菜单选项： div涡流的当前内容变小并消失通过replaceChild将这些内容替换为其他内容新内容从小开始，旋转并显示如果新旧内容相同，则效果良好；但是，如果不同的话，漩涡下降是有效的，但是新的内容物在500毫秒后完全显示出来当它工作时，效果非常好下面是一个完整的工作示例： <html> <head> <script> var d1 = document.createElement('div'); d1.className = 't';

用户单击菜单选项：

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>


var d1=document.createElement（'div'）；
d1.className='t'；
d1.innerHTML='testing1'；
var d2=document.createElement（'div'）；
d2.className='t'；
d2.innerHTML='testing2'；
功能测试（否）{
//当前
var cur_dom=document.body.getElementsByTagName（'div'）[0]；
cur_dom.style.webkitttransform=“旋转（180度）比例（0.1）”；
设置超时（步骤2500）；
//新的
函数step2（）{
//用零件替换节点
var new_dom=（no==1）？d1:d2；
cur_dom.parentNode.replaceChild（new_dom，cur_dom）；
新建_dom.style.webkitttransform=“旋转（0度）”；
}
返回false；
};
div{边框：1px实心红色；}
div.t{-webkit变换：旋转（180度）比例（0.1）；
-webkit转换：-webkit转换易进易出500ms；}
这将被替换

避开了懦夫，将新dom的innerHTML复制到现有dom中，并旋转它，而不是分配dom

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

很好用。但是仍然很难看。

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

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

工作示例：

您的问题有点难以理解。你能提供一个工作示例吗？@RoToRa-现在有完整的工作示例作为单个html文件，我认为你是对的。我可以做替换，但我需要比实际的div旋转低一级。