旋转时如何使div不消失（90度）

Question

在我的网页上，我有一个div。在那个div我有＆＃34;动画＆＃34;模拟被翻转的div（翻转）。

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

我旋转＆＃34;包装＆＃34; 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');
});