CSS 变换与 setTimeout firefox 崩溃隔开

Question

我正在尝试使用 CSS 转换组合一个“翻页”动画。我有一个在页面上垂直运行的长条（div）。当我想要关闭页面使其不可见时，我添加了 stripe_animation_closed 样式（并删除了打开样式）。当我想打开一个页面时，我添加了 stripe_animation_exec_left_open 样式（并删除了 close 样式）。我正在转动的 DIV 有一个 UL，其中包含一些包含文本的 LI 元素。

发生的情况是，有时 FireFox 会在其中一个动画发生时崩溃。我一生都无法弄清楚发生了什么。我用谷歌搜索了这个，看到一些关于字体不好的 Firefox 错误，但我使用的是他们建议的 Arial。

奇怪的是，我在隐藏页面和打开新页面之间有 2 秒的 setTimeout。如果我只是忘记了超时并将所有样式一起添加/删除，则似乎不会发生崩溃。它也没有动画。

进行样式切换的代码

$(".stripe_4 .fSort li").on("click", function() {
    if( $(".stripe_3").hasClass("stripe_animation_exec_left_open") ){
        $(".stripe_3").removeClass("stripe_animation_exec_left_open");
        $(".stripe_3").addClass("stripe_animation_closed");

        setTimeout( function(){
            $(".stripe_3").addClass("stripe_animation_closed");
            $(".stripe_3").addClass("stripe_animation_exec_left_open");
        }, 2000 );

    } else {
        $(".stripe_3").addClass("stripe_animation_closed");
        $(".stripe_3").addClass("stripe_animation_exec_left_open");
    }

    $(".stripe_4 .fSelected").removeClass("fSelected");
    $(this).addClass("fSelected");

    //attemptJoin();
});

关闭页面的样式

.stripe_animation_closed {
   -webkit-transition: all 1s ease-in-out; 
   -moz-transition: all 1s ease-in-out; 
   -o-transition: all 1s ease-in-out; 
   transition: all 1s ease-in-out;

   -webkit-transform: rotateY(90deg) ;/*scale(0.97, 0.97);*/
   -moz-transform: rotateY(90deg) ;/*scale(0.97, 0.97);*/
   -o-transform: rotateY(90deg) ;/*scale(0.97, 0.97);*/
   -ms-transform: rotateY(90deg) ;/*scale(0.97, 0.97);*/
   transform: rotateY(90deg) ;/*scale(0.97, 0.97);*/

   /*transform-origin: 0%;*/
   opacity:0.1;

}

打开页面的样式

.stripe_animation_exec_left_open {
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out;

   -webkit-transform: rotateY(0deg); /*scale(1, 1);*/
   -moz-transform: rotateY(0deg); /*scale(1, 1);*/
   -ms-transform: rotateY(0deg); /*scale(1, 1);*/
   -o-transform: rotateY(0deg); /*scale(1, 1);*/
   transform: rotateY(0deg); /*scale(1, 1);*/

   /*transform-origin: 0%;*/
   opacity: 1;
}

Answer 1

这可能是与性能相关的问题。我真的会减少绘制浏览器必须做的计算量。例如你指定transition:all ...，你只需要transition: transform ...。

这应该会大大减少完成的工作量。试试这个，看看它是否对你的情况有帮助。

此外，如果您愿意，您可以尝试使用 css 动画而不是过渡。动画具有 javascript 事件处理程序，您可以更好地检测动画实际结束的时间。

带有 JS 事件的 CSS 动画示例

http://www.sitepoint.com/css3-animation-javascript-event-handlers/