1

我有一个带有简单过渡的页面。我从左侧滑入一个面板（copyDeck 类），我有一个元素，其中包含一个覆盖背景图像的动画 gif（animatedTank 类）。我正在使用 js onload 向 body 添加一个加载类来触发动画。这一切在所有浏览器中都运行良好，一位用户指出，在带有最新版本 chrome 的 Mac 上，我们遇到了问题。我滑入的 div 实际上是按比例缩小的，包含元素的动画 gif 从底部向上滑动（我没有为此元素或其父元素设置动画）

 h1, .copyDeck, h1 + span, div.mainContent ul{
-webkit-transform:translateX(-60%); 
-moz-transform:translateX(-60%);
-o-transform:translateX(-60%);
transform:translateX(-60%); 
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
 } 
.copyDeck{
-webkit-transition-delay:.125s;
-moz-transition-delay:.125s;
-o-transition-delay:.125s;
transition-delay:.125s;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: alpha(opacity=0);
     -moz-opacity: 0;
     opacity:0; 
     margin-top: 3em;
 }
 .loaded h1, .loaded .copyDeck, .loaded h1 + span, .loaded div.mainContent ul, .loaded blockquote, .loaded .CTA{
-webkit-transform: translateX(0);   
-moz-transform: translateX(0);  
-o-transform: translateX(0);    
transform: translateX(0);   
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity:1;  
}
.animatedTank {
    background: transparent url("Assets/transportation_imgSeq.gif") top left no-repeat;
    width: 212px;
    height: 369px;
    position: relative;
    top: -340px;
    left: 389px;
    float: left;
}  
<div class="mainContent">
        <div class="fadeOvr"></div>
        <h1>Level Tanks</h1>
        <span>&amp; A Better Bottom Line</span>
        <div class="copyDeck">
            <p>
                ...
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </div>
    <div class="animatedTank"></div>

有谁知道修复，解决方案或有没有人遇到过这个问题？

4

0 回答 0