Question

任何人都可以解释为什么this 3D在您访问该页面时正常工作，但在您切换到另一个标签然后还原到该页面时会解体？

enter image description here

但是......

enter image description here

......它消失在屏幕上！

HTML：

<html>
    <head>
        <link href="styles/styles.css" rel="stylesheet" />
    </head>
    <body style='background-color: white; width: 900px;'>
        <div style='margin: 50px auto;'>
            <div id="img" style="background-image: url('img1.jpg'); width: 850px; height: 520px" />
        </div>
        <script src="js/libs/jquery/jquery-1.6.4.js" type="text/javascript"></script>
        <script src="js/libs/jquery/jquery-slide-show-filter.js" type="text/javascript"></script>
    </body>
</html>

CSS：

#container{
    -webkit-perspective: 800;
    width: 850px;
    height: 520px;

}

#img, #s1 {
            -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-repeat: no-repeat;
}

#cube{
      -webkit-transform-style: preserve-3d;
      -webkit-transform: translateZ(-425px);
      -webkit-backface-visibility: hidden;
    width: 850px;
    height: 520px;

}

#cube.enable
{
    -webkit-animation: flash 0.75s ease-in-out;
    -moz-animation: flash 0.75s ease-in-out;
    -ms-animation: flash 0.75s ease-in-out;
    -o-animation: flash 0.75s ease-in-out;
    animation: flash 0.75s ease-in-out;
}

@-webkit-keyframes flash {
    100%   { -webkit-transform: translateZ(-425px) rotateY(90deg); }
}

脚本：

var getImage = function(){
    var images = ["img1.jpg", "img2.jpg", "img3.jpg"];


    $.each(images, function( index, value ) {
        $('<img />').attr('src', value);
    });

    index = 0;

    return function(){
        if (++index == images.length){
            index = 0;
        }

        return images[index];
    };
}();

setInterval(function(){
    transform($('#img'), getImage());
}, 1000);

function transform(img, newImg){

    img
        .wrap('<div id="container"><div id="cube"></div>')
        .css('-webkit-transform', 'translateZ(425px)');

    img
        .clone()
        .attr('id', 's1')
        .insertBefore(img)
        .css('background-image', 'url("' + newImg + '")')
        .css('position', 'absolute')
        .css('-webkit-transform', 'rotateY(-90deg) translateZ(425px)');

    PrefixedEvent($('#cube')[0], "AnimationEnd", function () {
        img.unwrap().unwrap();
        img.remove();
        $('#s1')
            .attr('id', 'img')
            .css('-webkit-transform', '');
    });

    $('#cube').addClass('enable');
}


function PrefixedEvent(element, type, callback) {
var pfx = ["webkit", "moz", "MS", "o", ""];
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p]+type, callback, false);
    }
}

Answer 1

我认为是因为如果你切换标签AnimationEnd事件没有触发，那么就没有清理。

Answer 2

您可以通过仅在窗口具有焦点时调用transform来解决问题：

(function() {
  var inTab= false;
  $(window).blur(function() {
    inTab= false;
  });
  $(window).focus(function() {
    inTab= true;
  });
  setInterval(function() {
    if(inTab) {
      transform($('#img'), getImage());
    }
  }, 1000);
})();

<强>

<强> Fiddle

单击图像以模拟正在聚焦的窗口。然后，您可以在标签之间切换，动画将不再中断。

切换选项卡让CSS变得疯狂

2 个答案:

<强> Fiddle