CSS3在FF和Chrome之间的转换不一致

CSS3 transitions inconsistent across FF and Chrome

本文关键字：转换 不一致 之间 Chrome FF CSS3      更新时间：2023-09-26

所以我创建了一个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();
    });

我真的不知道为什么不同的浏览器会有所不同。我希望有人能告诉我发生了什么…

这是jsFiddle链接。如果你在两个浏览器中都运行它，你会看到动画的位置是不同的。在FF，它看起来像是盒子长大了，这就是我想要的。在铬，这是非常奇怪的。。。

您的转换明确要求为"顶部"answers"左侧"设置动画。他们必须从某个地方开始，所以他们从零开始。这是一个奇怪的情况，因为"克隆元素"样式并不是赋予元素"顶部"answers"左侧"值的样式，而是您的代码将它们直接放在元素上。

不过，您也设置了边距的动画；Chrome似乎没有太多注意到这一点。如果我把"top"answers"left"属性从转换中去掉，它会让它的行为更像Firefox。

在元素存在的同时对其进行转换的概念让我有点困惑。我希望有人能给出更好的答案。

相关文章：