CSS中的延遲：活動選擇器生效

Question

我無法讓我的CSS 3按鈕正常運行。您可以在one of my project pages查看按鈕。問題是在:active CSS選擇器生效之前會有一秒左右的延遲，使按鈕稍微移動並改變陰影;它以前沒有這樣做過。這裏的薩斯代碼：

@mixin transition($type, $time, $ease) { 
    -webkit-transition: $type $time $ease; 
    transition: $type $time $ease; 
} 

@mixin border-radius($length) { 
    border-radius: $length; 
    -webkit-border-radius: $length; 
    -moz-border-radius: $length; 
} 

.project-download { 
    color: #000300; 
    background-color: #00910A; 
    padding: 10px; 
    position: relative; 
    text-align: center; 
    font-size: 24px; 
    font-weight: bold; 

    @include transition(background-color, 0.2s, linear); 
    @include border-radius(10px); 

    box-shadow: 
    1px 1px 0 0 #014D06, 
    2px 2px 0 0 #014D06, 
    3px 3px 0 0 #014D06, 
    4px 4px 0 0 #014D06, 
    5px 5px 5px 0 #000000; 

    -webkit-box-shadow: 
    1px 1px 0 0 #014D06, 
    2px 2px 0 0 #014D06, 
    3px 3px 0 0 #014D06, 
    4px 4px 0 0 #014D06, 
    5px 5px 5px 0 #000000; 

    -moz-box-shadow: 
    1px 1px 0 0 #014D06, 
    2px 2px 0 0 #014D06, 
    3px 3px 0 0 #014D06, 
    4px 4px 0 0 #014D06, 
    5px 5px 5px 0 #000000; 

    &:hover { background-color: #00B00C; } 
    &:active { 
    box-shadow: 1px 1px 5px 0 #000000; 
    -webkit-box-shadow: 1px 1px 5px 0 #000000;  
    -moz-box-shadow: 1px 1px 5px 0 #000000; 
    top: 4px; 
    left: 4px; 
    } 
} 

它轉換在CSS中：

.project-download { 
    color: #000300; 
    background-color: #00910A; 
    padding: 10px; 
    position: relative; 
    text-align: center; 
    font-size: 24px; 
    font-weight: bold; 

    box-shadow: 
    1px 1px 0 0 #014D06, 
    2px 2px 0 0 #014D06, 
    3px 3px 0 0 #014D06, 
    4px 4px 0 0 #014D06, 
    5px 5px 5px 0 #000000; 

    -webkit-box-shadow: 
    1px 1px 0 0 #014D06, 
    2px 2px 0 0 #014D06, 
    3px 3px 0 0 #014D06, 
    4px 4px 0 0 #014D06, 
    5px 5px 5px 0 #000000; 

    -moz-box-shadow: 
    1px 1px 0 0 #014D06, 
    2px 2px 0 0 #014D06, 
    3px 3px 0 0 #014D06, 
    4px 4px 0 0 #014D06, 
    5px 5px 5px 0 #000000; 

    border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 

    -webkit-transition: background-color 0.2s linear; 
    transition: background-color 0.2s linear; 
} 

.project-download:active { 
    box-shadow: 1px 1px 5px 0 #000000; 
    -webkit-box-shadow: 1px 1px 5px 0 #000000;  
    -moz-box-shadow: 1px 1px 5px 0 #000000; 
    top: 4px; 
    left: 4px; 
} 

.project-download:hover { background-color: #00B00C; } 

我已經搜查谷歌了一下，沒有運氣。有任何想法嗎？

編輯： 我解決了Clicky是造成使用該JavaScript函數的問題：

function removeLinkListeners() 
{ 
    var links = document.getElementsByTagName('a'); 
    for (var i = 0; i < links.length; i++) 
    { 
    if (links[i].classList.contains('project-download-link')) 
    { 
     links[i].removeEventListener('mousedown', clicky.outbound); 
    } 
    } 
} 

和更改初始化腳本這樣：

<script type="text/javascript"> 
try 
{ 
    clicky.init(234973); 
    window.onload = removeLinkListeners; 
} 
catch(e) {} 
</script> 

Answer 1

如果你把你的代碼在jsfiddle的例子中...

http://jsfiddle.net/zfFtv/

你會注意到沒有任何延遲。所以我懷疑它是你的javascript。 getclicky代碼可能效率不高，並在點擊它時導致延遲？嘗試禁用你的js文件逐一查明問題。