-webkit 转换和 jQuery .animate() 之间的冲突答案

【问题标题】：Conflict between -webkit transform and jQuery .animate()-webkit 转换和 jQuery .animate() 之间的冲突
【发布时间】：2012-04-15 09:54:03
【问题描述】：

更新：我设置了一个小提琴，它似乎工作正常 - 首先滑入的部分包含谷歌地图 - 我想知道这是否真的是问题......

我最近在我正在开发的 HTML5 应用程序中添加了一个 -webkit-transform 卡片翻转功能。不幸的是，这会使水平移动的简单轮播显示出一些奇怪的行为。

我的轮播结构是这样的

<div id="wrapper">
    <div id="sections">
        <section id="startPage" class="page">
            <div id="card">
                <div class="face front">
                    <p>Some content here</p>
                    <button id="flipFront">A label</button>
                </div>
                <div class="face back">
                    <p>Some content here</p>
                    <button id="flipBack">A label</button>
                </div>
            </div>
        </section>
        <section></section>
        <section></section>
    </div>
</div>

我的 jQuery .click() 循环通过它的行为是这样的：

$('#sections').stop().animate({"left": -($('#someDiv').position().left)}, 500);

这绝对没问题，直到我为卡片翻转添加 -webkit-transform CSS：

#startPage {
    -webkit-perspective: 1000;
}

#card {
    height: 940px;
    width: 640px; 
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
}

.back {
    -webkit-transform: rotateY(180deg);
    background-color:#000;
}

.rotated{
    -webkit-transform: rotateY(180deg);
}

.back, .front {
    height: 940px;
    width: 640px; 
}

.face {position: absolute;-webkit-backface-visibility: hidden;}

现在我的卡片在我使用时可以正常翻转

$('#setup, #back').click(function() {
    $('#card').toggleClass('rotated');
});

我的轮播仍然有效，但似乎卡住了 - 例如它会部分滑出，并保持在原位，直到我以某种方式与 div 交互，然后它会卡入正确的位置。

问题好像是

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

当我从 CSS 中删除它们时，轮播可以正常工作，但翻转却不行。

我在 Safari 和 Chrome 上都进行了测试，结果是一样的。任何想法将不胜感激。

【问题讨论】：

你有小提琴或在线演示吗？
还没有 - 不过我会设置一个。
小提琴似乎在工作 - 在线演示在这里：thaifloodwatch.com/mobile

标签： jquery html css webkit-transform

【解决方案1】：

只有 webkit 转换才能搞砸，添加更多信息，如

-webkit-transform: rotateY(180deg) scale(2);
-moz-transform: rotateY(180deg) scale(2);
-o-transform: rotateY(180deg) scale(2);
-ms-transform: rotateY(180deg) scale(2);

所以它被更多的浏览器支持并且你有一个后备。我已经多次看到这个问题，但是我不能保证，因为我没有用你的代码测试过。

【讨论】：

【解决方案2】：

transform 属性不适用于 jquery 中的 animate() 函数，因为 animate() 函数只接受本质上是数字的值。例如。数字（如“margin:30px”）。

transform 属性采用非数字值。

参考：http://www.w3schools.com/jquery/eff_animate.asp

但是您可以使用 “阶梯函数” 来实现带有动画的变换效果或使用 Transit 插件。 http://ricostacruz.com/jquery.transit/

希望这会有所帮助。

【讨论】：