如何使旋轉div不消失（90deg）

Question

在我的網頁上我有一個div。在那個div上，我有一個「動畫」，它模擬div被翻轉（翻轉）。

<div id="wrapper"> 
    <div id="content"> 
     Some content 
    </div> 
</div> 

我旋轉「包裝」div與jQuery plugin transit。插件所做的只是應用CSS;

transform: rotateY(180deg); 

當DIV是rotateY(90deg)，我要加載在#content DIV一些新的內容。這需要很少的時間，但在動畫中，您可以看到div在此之前已經消失/隱藏。

SEE DEMO FIDDLE （請注意，我沒有實際內容加載這裏）

是否有可能有潛水沒有完全消失的時候rotateY(90)？

不幸的是，我無法控制HTML本身，因爲它正在生成。

Answer 1

嘗試添加厚度。參考如下：want to show the thickness of an element while it rotate

但是使css的動畫： 0％：transform：rotateY（0deg）; 50％：transform：rotateY（90deg）; 100％：transform：rotateY（180deg）;

希望這會有所幫助。

確保jQuery插件有css文件或者查看它。

而且你可以使用基本的CSS和jQuery來做到這一點。

Answer 2

不要改變div的內容，只需創建兩個方面：

<div id="wrapper"> 
    <div class="side-a"> 
     Some content 
    </div> 
    <div class="side-b"> 
     Some content 
    </div> 
</div> 

CSS：

#wrapper{ 
    transition: all 2s; 
    position: relative; 
} 
#wrapper.flip{ 
    transform: rotateY(180deg); 
} 
.side-a{ 
    z-index: 1; 
    opacity: 1; 
    position: absolute; 
    height: 100%; 
    transition-delay: 1s; //half the transition time of the wrapper 
} 
.side-b{ 
    z-index: 0; 
    opacity: 0; 
    transform: rotateY(180deg); 
    position: absolute; 
    height: 100%; 
    transition-delay: 1s; 
} 
.flip side-a{ 
    z-index: 0; 
    opacity: 0; 
} 
.flip side-b{ 
    z-index: 1; 
    opacity: 1; 
} 

的Javascript：

$('.next-slide').click(function(){ 
    $('#wrapper').addClass('flip'); 
}); 
$('.prev-slide').click(function(){ 
    $('#wrapper').removeClass('flip'); 
});