0

最近、プラグインのビルド中に Firefox 14.0.1 にアップグレードしました。プラグインは、border-radius、border-width、border-color、およびその他のさまざまなプロパティを同時にアニメーション化します。他のブラウザや以前のバージョンの FireFox では問題はありませんが、更新後、回転でアニメーション化すると境界半径アニメーション中に深刻な断片化/アーティファクトが発生することに気付きました。以下は、回転用のコードです。

/* ROTATE */
function animate_rotate(degree,Speed,AnimateDegree){
   /* FACTOR DEGREE */if(degree<AnimateDegree){
        ++degree; Screens.current_rotate=degree;
  }else if(degree>AnimateDegree){
        --degree; Screens.current_rotate=degree;
  };
  /* APPLY THE NEW ROTATION ANGLE TO IE>9 */
  if(!ievers<=8){
       $ScreensLightbox.css({'-moz-transform':'translateX(0) rotate('+degree+'deg)','-moz-transform-origin':''+Screens.LBRotateHandle[0]+'% '+Screens.LBRotateHandle[1]+'%','-webkit-transform':'translateX(0) rotate('+degree+'deg)','-webkit-transform-origin':''+Screens.LBRotateHandle[0]+'% '+Screens.LBRotateHandle[1]+'%',/* Opera */'-o-transform':'translateX(0) rotate('+degree+'deg)','-o-transform-origin':''+Screens.LBRotateHandle[0]+'% '+Screens.LBRotateHandle[1]+'%',/* IE>=9 */'-ms-transform':'rotate('+degree+'deg)','-ms-transform-origin':''+Screens.LBRotateHandle[0]+'% '+Screens.LBRotateHandle[1]+'%'});
   };
/* PUSH INSTANCE TIMER-ON ARRAY */
Screens.Rotate_Timer.push(setTimeout(function({animate_rotate(degree,Speed,AnimateDegree)},Speed/63));
};

境界線の半径をアニメーション化する関数は次のとおりです。

/* BORDER RADIUS */
function animate_border_radius(SetBorderRadius,AnimateBorderRadius,Speed,Effect){
     $ScreensLightbox.css({'border-top-left-radius':SetBorderRadius,'border-top-right-radius':SetBorderRadius,'border-bottom-left-radius':SetBorderRadius,'border-bottom-right-radius':SetBorderRadius})
    .animate({borderTopLeftRadius:AnimateBorderRadius, borderTopRightRadius:AnimateBorderRadius,borderBottomLeftRadius:AnimateBorderRadius,borderBottomRightRadius:AnimateBorderRadius,WebkitBorderTopLeftRadius:AnimateBorderRadius,WebkitBorderTopRightRadius:AnimateBorderRadius,WebkitBorderBottomLeftRadius:AnimateBorderRadius,WebkitBorderBottomRightRadius:AnimateBorderRadius,MozBorderRadius:AnimateBorderRadius},
    {duration:Speed,queue:false,specialEasing:{borderTopLeftRadius:Effect,borderTopRightRadius:Effect,borderBottomLeftRadius:Effect,borderBottomRightRadius:Effect,WebkitBorderTopLeftRadius:Effect,WebkitBorderTopRightRadius:Effect,WebkitBorderBottomLeftRadius:Effect,WebkitBorderBottomRightRadius:Effect,MozBorderRadius:Effect}});
    };

最新の Firefox で Rotate と Border Radius を同時にアニメーション化しようとすると、同様の問題が発生する人はいますか? ありがとう！

4

2 に答える 2

1

非常によく似た問題が発生しています。アニメーション機能でフェードインする画像がいくつかあります。14.0.1 リリースまでは、FF を含むすべてのブラウザーでうまく機能します。

// image animation
$("#imgDisplay img").each(function(index) {
    var tm = 800 * index;
    var imgTop = $(this).css('margin-top');
    arr = imgTop.split('px');
    var imgTopStart = (arr[0]*1)-50;
    $(this).css({
        "opacity": "0",
        "margin-top": imgTopStart+"px"
    }).show();

    $(this).delay(tm).animate({
        opacity: 1,
        "margin-top": imgTop
    }, 1500, function() {
        // Animation complete.
    });
});
于 2012-07-25T15:37:14.683 に答える
1

同様のバグがあり、translateZ を追加すると役立ちました。これがあなたの場合に役立つかどうかはわかりませんが、試してみる価値があります：

-moz-transform: rotate(10deg) translateZ(1px);
于 2012-08-14T14:28:51.483 に答える