javascript - 使用Oridomi(JS)在DIV上展开动画

我正在使用Oridomi（oridomi.com）Javascript插件来实现纸张折叠动画。具体来说，我想在页面加载时打开一个div（画一本书）。

但是，尽管可以通过插件调用unfold（）方法，但我还是很难工作。

您可以从此example中看到，我只能使div向后折叠，而不是从折叠状态展开（实际上，我希望动画可以反转）。

我的JavaScript函数-

(function(){ function init(){

var $domi = $('.unfold').oriDomi({ vPanels: 2, hPanels: 1, speed: 500, shading: false });

setTimeout(function(){
$domi.oriDomi('reveal', -90);
}, 600);}

document.addEventListener('DOMContentLoaded', init, false);

})();

和CSS-

.unfold {
    font-family: "Abril Fatface", "Hoefler Text", Constantia, Palatino, Georgia, serif;
    font-size: 4.5rem;
    width: 25rem;
    height: 10rem;
    text-align: center;
    line-height: 1;
    color: #ff676d;
    background-color: #6ac1ff;
    padding: 2.5rem 0;
}

http://oridomi.com上的文档对于如何实现这一点尚不清楚。任何帮助将不胜感激。谢谢

最佳答案

如果Oridomi不支持反向，则有2个选项。一种是知道END凝视和domi.oriDomi('reveal', 0);。另一种方法是先以0的速度反转它，然后在0度显示以展开。这是一个小玩意儿：

http://jsfiddle.net/Av6cD/2/

(function fold() {

    var $domi = $('.unfold').oriDomi({
        vPanels: 2,
        hPanels: 1,
        speed: 500,
        shading: false
    });

    $domi.oriDomi('reveal', -90);

    setTimeout(function () {
        $domi.oriDomi('reveal', 0);
    }, 1000);

})();

请注意，即使这是一个很好的效果，oriDomi还是对您的DOM造成了很大的麻烦。一旦获得适当的支持，CSS着色器将成为一种解决之道。