用Oridomi（JS）展开DIV动画

Question

我使用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的文档是不是这是如何实现的非常清楚。任何帮助将非常感激。谢谢

Answer 1

如果Oridomi不支持反转，你有2个选项。其中一个就是了解END盯梢和domi.oriDomi('reveal', 0);。另一种方法是先以0的速度将其逆转，然后以0deg显示展开。下面是这个小提琴：

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着色器就会成为一种方式。