CSS3動畫鏈接點擊，而不是頁面加載

我有一個類似reddit的應用程序，我想要一個CSS3動畫來觸發每當我downvote項目。我已經設置好了，只要downvote，但錄製時動畫都能正常工作，但它也會在初始頁面加載時觸發。任何企圖不這樣做都會導致動畫在任何情況下都不起作用。CSS3動畫鏈接點擊，而不是頁面加載

動畫被觸發我erb頁以下幾點：

<div class="animations"> 
    <%= image_tag "ballerino.png", class: "fixed animation-left-to-right", id: "to-animate", style: "margin-top: 80px; width: 300px" %> 

    <script> 
    $(".downvote").on('click', function() { 
    $('#to-animate').addClass('animation-left-to-right'); 
    window.location.reload(false); 
    }); 
    </script> 

</div> <!-- animations -->

我也有我的application.scss頁面下面的定義，我試圖與jQuery的使用：

.fixed { 
    position: fixed; 
} 

.no-display { 
    display: none; 
}

任何人都可以幫我解決這個問題，這樣動畫不會在頁面初始加載時觸發嗎？

注意：我並沒有將動作本身的實際CSS複雜化，因爲動畫是正常工作，只是一個額外的時間。如果有人認爲它會幫助我可以添加它，但我真的認爲這個問題是與我的JavaScript。

來源

2016-08-26 Liz

你已經對img標籤的'動畫從左right'類。所以它會在頁面加載時觸發。刪除這可能有幫助，因爲你通過jQuery應用它。 – AA2992

@AnkithAmtange，當您最初導航到頁面（初始頁面加載）時，動畫會運行一次，然後在應該時（在「downvote」上）再次運行。如果我從圖像的「類」中刪除了「動畫從左到右」，那麼它就會作爲一個固定的圖像停留在頁面上，無論如何都不會移動。 – Liz

將'animation-play-state：paused;'添加到'動畫從左到右'的類中......然後downvote使用jQuery將CSS更改爲'animation-play-state：running'，而不是添加類。 – AA2992

動畫在加載時運行，因爲您已將該類添加到圖像標記中，所以當它加載時它會做任何類（在這種情況下爲動畫）。 Ankith是正確的，如果你不想在加載時運行，那麼只能修復該類名稱。它可能很愚蠢，但既然你已經有了一個類，試着在你的javascript調用的開頭添加一個空的空間，這可能是爲什麼沒有做任何事情，因爲你最終得到一個名爲'fixedanimation-left-向右」

嘗試

<script> 
$(".downvote").on('click', function() { 
$('#to-animate').addClass(' animation-left-to-right'); 
    window.location.reload(false); 
    }); 
</script>

來源

2016-08-26 23:57:56 frenciaj

我知道'animation-left-to-right'的存在就是爲什麼它在加載時運行，但沒有那個（用前面的javascript或者用空間建議的新的javascript）沒有任何事情發生在圖像上點擊downvote時。它只是靜止在頁面上。 – Liz

如果你檢查鉻工具，是否正確添加類（如果你不添加它）？ – frenciaj

我點擊'downvote'，然後檢查'inspect'窗口的'elements'選項卡以及'view page source'版本。它上面沒有「動畫從左到右」的字樣。然後，我想也許這可能是因爲'window.location.reload（false）'刷新頁面，所以我擺脫了那只是爲了檢查，它仍然沒有出現... – Liz

CSS3動畫鏈接點擊，而不是頁面加載

回答

相關問題