这对于更简单的元素非常有用……带有前/后div的DIV,可能还有一两个额外的跨度.
但是当我试图翻转一个更大的元素…即整个屏幕时,我会重绘毛刺.一旦我交换css类开始转换会发生什么,’bottom’div的部分弹出’top’div,然后翻转发生,然后它们再次弹出.并且它不是显示的整个元素……它是沿着轴分割的元素的一半,我正在进行平移3d旋转.
关于可能导致这种情况的任何想法或理论?在iPad上作为应用程序和在Safari中的桌面上都会发生相同的情况,因此似乎是一个webkit问题.
可能是一些CSS问题?或者是否尝试使用具有大背景图像的复杂嵌套元素进行全屏translate3d旋转,这比Safari可以处理的更多?
更新1:
我在缩小问题方面取得了进展.
发生的事情是,当我执行translate3d翻转时,“偷看”的元素恰好是之前通过translate3d定位的子元素.
我希望使用translate3d转换的“页面”结构:
<div id="frontbackwrapper"> <div id="front"> </div><!--/front--> <div id="back"> </div><!--/back--> </div><!--/frontbackwrapper-->
这适用于它自己.前部div由后部div替换,具有卡片翻转效果.
问题是在进行整页翻转之前,我已经使用translate3d在#front div中设置了一些元素:
<div id="frontbackwrapper"> <div id="front"> <div class="modal"></div> </div><!--/front--> <div id="back"> </div><!--/back--> </div><!--/frontbackwrapper-->
示例CSS:
.modal { width: 800px; height: 568px; position: absolute; left: 112px; z-index: 100; -webkit-transition-duration: 1s; -webkit-transform: translate3d(0,-618px,0); /* set off screen by default */ } .modal.modalOn { -webkit-transform: translate3d(0,80px,0); /* slides the div into place */ }
如果 – 而不是使用translate3d – 我只是重新定位顶部样式的div或转换顶部属性,我没有得到偷看问题.当然,这意味着我必须分别放弃光滑的动画或硬件加速.
此时,它看起来像一个webkit错误.我会一直在玩它.如果有人在此之前遇到过这种情况并找到了解决方法,我全都听见了!
解决方法
修复方法是首先为子元素设置动画,然后一起删除翻译样式.
CSS结构现在是:
/* default class for the start of your element */ .modal-startposition { -webkit-transition-duration: 1s; -webkit-transform: translate3d(0,0); } /* add this class via jQuery to then allow webkit to animate the element into position */ .modal-animateposition { -webkit-transform: translate3d(0,0); } /* when animation is done,remove the above class and replace it with this */ .modal-endposition { top: 80px; }
还有一些示例jQuery:
//[attach a click event to trigger and then...] $myModal .addClass("modal-animateposition") .on('webkittransitionend',function () { $myModal .removeClass('modal-startposition') .removeClass('modal-animateposition') .addClass('modal-endposition'); });
有点乏味,但它完全修复了屏幕重绘问题.
编辑:更正了一个错字