CSS 转换与 setTimeout firefox 崩溃间隔开

Question

我正在尝试使用 CSS 转换制作“翻页”动画。我有一个在页面上垂直运行的长条纹 (div)。当我想要关闭页面以使其不可见时，我添加了 stripe_animation_closed 样式(并删除了打开样式)。当我想打开一个页面时，我添加了 stripe_animation_exec_left_open 样式(并删除了关闭样式)。我要转换的 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/