Question

我首先尝试使用CSS，但是当我被告知它在Safari上看起来有问题时，我尝试使用Greensock的Javascript库来查看它是否修复了它。它仍然有相同的问题，仍然只在Safari上。经过一番研究后，我看到了discussed on StackOverflow as a Safari bug。

Codepen example

jQuery(function($){
var iconsHoverIn = function() {
    TweenMax.to($(this).find('.iconBG'), 0.5, {
        rotationY: 180, 
        opacity: 0
        }
    );
    TweenMax.to($(this).find('.hoverImage'), 0.5, {
        rotationY: '-180', 
        opacity: 1
        }
    );
}
var iconsHoverOut = function() {
    TweenMax.to($(this).find('.iconBG'), 0.5, {
        rotationY: 0, 
        opacity: 1
        }
    );
    TweenMax.to($(this).find('.hoverImage'), 0.5, {
        rotationY: 0, 
        opacity: 0
        }
    );
}

$('.iconBlock').hover(iconsHoverIn, iconsHoverOut);

});

错误是：在进行转换时，元素的一半似乎与另一半的转换不同。它在中间显示一条线，就好像元素是由纸制成并弯曲成两半。

周围有什么办法吗？我向客户端展示了一些动画，但这个动画（rotateY）是一致的选择。

注意：我对Javascript和Greensock有点新鲜。您可能会注意到我做的更好的方法。我不会介意改进它的建议，但我真正想要的是解决bug /故障。

Answer 1

正如您在问题中发布的解决方案所示，将translateZ（在GSAP术语中仅表示z）添加到.iconBG元素或.hoverImage元素应该解决你的问题。

以下是您演示的 forked codepen ，代码如下：

<强> JavaScript的：

var iconBlocks = $('.iconBlock');
var iconBGs = iconBlocks.find('.iconBG');
var hoverImages = iconBlocks.find('.hoverImage');
var animDuration = 0.4;
var animEase = Power2.easeOut;
var numIcons = iconBlocks.length;
var timelines = [];
var timeline = null;
for (var i = 0; i < numIcons; i += 1) {
  timeline = new TimelineMax({ paused: true });
  timeline.fromTo(iconBGs[i], animDuration, { z: 0, rotationY: 0, autoAlpha: 1 }, { rotationY: 180, autoAlpha: 0, ease: animEase }, 0);
  timeline.fromTo(hoverImages[i], animDuration, { z: 100, rotationY: 180, autoAlpha: 0 }, { rotationY: 0, autoAlpha: 1, ease: animEase }, 0);
  timelines[i] = timeline;
}
iconBlocks.hover(function() { timelines[$(this).index()].play(); }, function() { timelines[$(this).index()].reverse(); });

是的，我已经改变了一些东西。完全是个人偏好，这里没有正确或错误的方式。如果这有帮助，请告诉我。

如何在Safari中平滑rotateY变换？

1 个答案: