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似乎并不太关注这一点。如果我将“顶部”和“左侧”属性从转换中移除，它会使它更像Firefox。

在元素出现的同时应用转换的概念对我来说有点混乱。我希望有人能够提供更好的答案。

FF3和Chrome的CSS3转换不一致

1 个答案: