1

我正在尝试使用 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}}，它会起作用，但我仍然有一些问题。

有人有什么主意吗 ？

谢谢

4

2 回答 2

2

我在使用新版本的 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;
于 2013-11-19T14:38:32.267 回答
0

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

于 2013-05-06T19:31:41.950 回答