ie8中的Tweenmax不透明度

Posted 2023-03-06

【中文标题】ie8中的Tweenmax不透明度

【英文标题】：Tween max opacity in ie8

【发布时间】：2013-04-20 18:23:16

【问题描述】：

我正在尝试使用 tween max 和 superscroll 脚本来处理滚动时内容的不透明度。

这就像 chrome、safari、ff、ie9 和 ie10 中的魅力。 但是，我对 ie8 有疑问。

你可以在这个页面看到问题：http://www.promenade-sainte-catherine.com/localisation

在 ie8 中向下滚动时，左侧菜单的颜色变为白色。这没关系，一旦动画完成，它又会变成绿色。

这是我的CSS：

   body #menuGaucheContainer #menuGauche .logoPSC 
    position: relative; zoom:1;
    /* line 270, sass/partial/_global.scss */
    body #menuGaucheContainer #menuGauche .logoPSC #log1, body #menuGaucheContainer #menuGauche                .logoPSC #log2 
      opacity: 0;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      position: absolute;
      top: -109px;
      left: 75px; 

这是 tweenmax 调用

   controller.addTween('#aucoeurducentrevilleContainer', 
        TweenMax.fromTo(jQuery('#img2Localisation'), 1,
            css:opacity:0,
            css:opacity:1), 
        200);
    controller.addTween('#aucoeurducentrevilleContainer', 
        TweenMax.fromTo(jQuery('#log2'), 1,
            css:opacity:0,
            css:opacity:1), 
        200);

如果我删除“过滤器：progid:DXImageTransform.Microsoft.Alpha(Opacity=0);”线。然后它工作得很好，但是在页面的开头没有任何不透明度为零。

如果我添加 css:opacity:X, alpha:X，没有任何变化，

如果我将 css:opacity:0 更改为 css:alpha:0，它会起作用，但我仍然有一些问题。

有人知道吗？

谢谢

【问题讨论】：

看起来您使用的是非常旧版本的 GreenSock 文件 (TweenMax)。您绝对应该更新 - 这可能会解决问题。 greensock.com/?download=GSAP-JS 否则，我会很好奇 tweening to opacity:0.99 而不是 1 是否可以为您解决问题。

是的，这完全成功了：不透明度：0.99 而不是 1。非常感谢。有没有办法让我接受你的回答，这样你就可以从中受益（在 *** 中我还有很多不明白的地方）

当然，我将其添加为您可以接受的答案。无论如何，我可能本来应该这样做 - 抱歉。

【参考方案1】：

我在新版本的 Greensock 中也遇到了这个问题，不是因为插件，而是因为 CSS。错误在开头的语句中：

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity:    0;

虽然如果您不想支持 IE7，这完全可以，但它会破坏 TweenMax 的动画规则。修复方法是添加 IE5-IE7 css 规则，即使您一般不支持 IE7：

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:    0;

【参考方案2】：

您似乎在使用 非常 旧版本的 GreenSock 文件 (TweenMax)。您绝对应该更新 - 这可能会解决问题。 http://www.greensock.com/?download=GSAP-JS 否则，尝试补间到 opacity:0.99 而不是 1 为您解决问题。但同样，我很确定更新会有所帮助，因为如果我的记忆正确，这个特定的场景在不久前的 TweenMax 更新中应用了一种解决方法。

【讨论】：

我不想更新文件，因为担心可能会出现其他问题。所以 0.99 而不是 1 的解决方案效果很好:)。谢谢