javascript - CSS3 在 FF 和 Chrome 中的过渡不一致

Question

所以我创建了一个 CSS3 动画，它在不同的浏览器中表现不一致。这是一个快速而粗略的概述，我在最后添加了一个 JSFiddle 链接。

这是 CSS:

.cloned_object {
   position:absolute;
   background-color:white;
   width: 700px;
   height: 640px;
   margin: 0; /*for centering purposes*/
   -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
   -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
   -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ;
   transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}

和 JS 函数:

$('.content_cell').on('click', function(event) {
        // if the user is on a browser older then IE9
        if ($.browser.msie && $.browser.version.substr(0,1)<10) {
            var $clonedElement = $( this ).clone(true).attr('class','cloned_object content_cell').appendTo('#mainContentTable');
            $clonedElement.css({left:$(this).position().left, 
                                top:$(this).position().top, 
                                opacity:1.0}) ;

            selectedPos = $(this).position();

            var currentPos = $('#invitedToChatCell').position();

            $clonedElement.animate({
                height:640, width:700, 
                //position:'absolute', 
                left:currentPos.left, 
                top:currentPos.top, 
                opacity:1.0 
            }, 500, function(){ $('.cloned_object > ul').toggle(); });

        } else {
            var currentPos = $('#invitedToChatCell').position();

            var $clonedElement = $( this ).clone(true).attr('class', 'content_cell').appendTo('#mainContentTable');
            $clonedElement.css({left:$(this).position().left, 
                                top:$(this).position().top}) ;

            $clonedElement.addClass('cloned_object');               
            $clonedElement.css({'margin-left':-$(this).position().left+125,
                                'margin-top':-$(this).position().top,
                                }) ;

            selectedPos = $(this).position();           

            $('.cloned_object > ul').toggle();
        }                   

        event.stopPropagation();
    });

我真的不明白为什么它会在不同的浏览器中有所不同。我希望有人能告诉我发生了什么......

Here is the jsFiddle link.如果您在两个浏览器中运行它，您将看到动画位置不同。在FF中，看起来盒子变大了，这就是我想要的。在 Chrome 中这很奇怪......

Answer 1

您的过渡明确要求对“顶部”和“左侧”进行动画处理。他们必须从某个地方开始，所以他们从零开始。这是一个奇怪的情况，因为“克隆元素”样式并不是为元素提供“顶部”和“左侧”值的样式，而是您的代码将它们直接放在元素上。

但是，您还对边距进行动画处理； Chrome 似乎并没有太关注这一点。如果我把“top”和“left”属性从过渡中去掉，它会变得更像 Firefox。

在元素出现的同时对其应用过渡的概念让我有点困惑。我希望有人能提供更好的答案。