在對鉻

底部留出空間這是一個負責任的設計和變換：平移Y（2000像素）;已應用於底部的塊。 Chrome中的動畫效果很好，但動畫似乎在頁面底部留下了空白區域。這隻在Chrome中發生。在對鉻

項目鏈接：

http://50.87.144.37/~projtest/team/design/Call/

CSS：

.come-in { 
    transform: translateY(2000px); 
    -webkit-transform: translateY(2000px); 
    animation: come-in 0.8s ease forwards; 
    -webkit-animation: come-in 0.8s ease forwards; 
} 

.come-in:nth-child(odd) { 
    animation-duration: 0.6s; /* So they look staggered */ 
    -webkit-animation-duration: 0.6s; 
}

JS：

(function($) { 

     $.fn.visible = function(partial) { 

     var $t   = $(this), 
      $w   = $(window), 
      viewTop  = $w.scrollTop(), 
      viewBottom = viewTop + $w.height(), 
      _top   = $t.offset().top, 
      _bottom  = _top + $t.height(), 
      compareTop = partial === true ? _bottom : _top, 
      compareBottom = partial === true ? _top : _bottom; 

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); 

     }; 

    })(jQuery); 

    $(window).scroll(function(d){ 

     $(".unWcalls").each(function(i, el) { 
     var el = $(el); 
    if (el.visible(true)) { 
     el.addClass("come-in"); 
    } 
    }); 
});

來源

2014-04-07 AnAspiringCanadian

僅供參考，動畫不_at ALL_在Chrome 33在Mac上運行。 –

我不得不刪除效果，因爲我找不到任何解決方案。如果並且當你願意研究這個問題，請在這裏發帖，我會進行修改，以便你可以查看它。 – AnAspiringCanadian

首先，祝賀你的前端設計。這是非常實用和愉快的反應。我想幫助你解決你的問題，但是看不到Firefox和Chrome之間的區別。你使用的是什麼版本的Chrome？謹慎添加預期和錯誤實驗的屏幕截圖？ – Kad

的問題是，你推的元素來與translateY(2000px)，然後將它們拉向後伸直了translate(0px)。因此，如果有道理的話，Chrome會爲他們留下一個位置。這個jsFiddle演示了這個問題。（我沒有打擾所有的供應商前綴）。

取而代之的是，在默認情況下將它們轉換下來，和他們拉了上滾動，like so。

如果仍然prooves車，動畫margin-top或top on absolute position。翻譯不會影響頁面佈局，對性能也更好，但這是你問題的一部分，對吧？

上不同的音符

，有幾個問題，我發現：

你的JavaScript在這裏的表現將是可怕的。每次用戶向上或向下滾動，即使所有動畫完成後，您都可以運行此功能來檢查位置。我相信你可以重構很多東西。
您還必須考慮JavaScript禁用的用戶。目前，頁面上沒有任何內容。
我認爲你的搜索框上有一個最小寬度設置，它在狹窄的屏幕上突出顯示它的邊界。

來源

2014-04-21 05:59:31 climbinghobo

這適用於Chrome測試版頻道（35.0.1916.27）。 – Kad

它的工作，非常感謝你！此方法工作：jsfiddle.net/kRNuW/1 – AnAspiringCanadian

-1

你可以試試下面的代碼：

改變相對靜態和檢查的位置可能會工作正常。

.sitewid { 
    margin: 0 auto; 
    position: static; 
    width: 960px; 
}

好運....

來源

2014-04-07 14:46:23

我不能從這個類中刪除相對的，我嘗試瞭解決方案，但它並沒有消除錯誤。 – AnAspiringCanadian

回答

相關問題