internet-explorer - Turn.js：在 Internet Explorer 中的动画期间，带有 class="fixed" 的页面消失

Question

我正在使用“固定”类来保持打开书本时的内封面可见。但是，它们会在任何翻页动画或拐角卷曲期间短暂消失。它只发生在 Internet Explorer（任何版本 - 我已经测试过 IE7、8、9、10）。我很困惑为什么。任何帮助将不胜感激。谢谢！

带有演示的代码要点：http: //bl.ocks.org/richardwestenra/6041734

TurnJS 文档：http ://www.turnjs.com/#api

Answer 1

经过数小时的反复试验，我找到了解决方法：我将“innerCover”类应用于所有页面，并使用以下代码从转弯开始时正在打开的页面中删除该类，以便当您转弯时，它们看起来像内页。这有点hacky，但它有效：

$('.flipbook').turn({
    when: {
        start: function(e, page, view) {
            var book = $(this),
                currentPage = book.turn('page'),
                pages = book.turn('pages');
            for(var i=3; i<pages; i++){
                if(i==page.page || i==page.next) {
                    $('.p'+i).removeClass('innerCover');
                } else {
                    $('.p'+i).addClass('innerCover');
                }
            }
        }
    }
});

Answer 2

我也在尝试解决这个问题，而这里的答案似乎对我不起作用。我想我会继续把我的 2 美分扔在这里，以防它指向正确的方向。

我已经设置了转弯开始，以便在翻内页时为 .animate 类提供内封面的背景。它肯定有它的问题，而且它很老套，但到目前为止似乎是我最接近答案的一个。这基本上就是我正在做的事情（包括封面在内的 12 页书）：

start: function(e, page, view, pageObj) {
var book = $(this),
currentPage = book.turn('page'),
pages = book.turn('pages');

if(page.page !== 1 && page.next !== 1 && page.page !== 12 && page.next !== 12) {
    $('.animated').css('background-image','url(/views/Home/pics/insidecovers.jpg)').css('background- size','cover');
} else {
    $('.animated').css('background-image','');
}