有jQuery添加（或觸發？）動畫

Question

所以我有一個圖形，通過一個很好的動畫填充。這是因爲圖中每個酒吧的CSS屬性

animation: slide-left 0.9s ease-in-out 1s both;

動畫看起來是這樣的：

@keyframes slide-left { 
    0% { 
    -webkit-transform: translateX(-200%); 
    } 

    70% { 
    -webkit-transform: translateX(2%); 
    } 

    100% { 
    -webkit-transform: translateX(0); 
    } 
} 

現在，我不是在JavaScript的很好，但我想這發生在點擊一個按鈕（並且將圖形隱藏直到按鈕被點擊）而不是在頁面加載時發生。

現在我已經刪除從CSS選擇器的動畫屬性，並添加translateX(-200%);

意識到，如果我通過inspect element添加animation: slide-left 0.9s ease-in-out 1s both;，正是我想要的發生。

所以，我發現了一個「解決方案」，看起來像這樣：

$("#button").on('click', show_function); 

function show_function() { 
    $(".graph").fadeIn("slow"); 
    $('<style>.bar-container>* { animation: slide-left 1s ease-in-out 1s both; }</style>').prependTo('body'); 
} 

這種感覺「笨重」，它需要幾乎一秒鐘加載。所以我想知道有什麼更好的方法來讓JavaScript/JQuery中的動畫觸發動畫？

Answer 1

你最好的答案很可能是在一個類中有動畫序列，並使用jQuery來添加類。例如。 CSS

@keyframes slide-left { 
    0% { 
    -webkit-transform: translateX(-200%); 
    } 

    70% { 
    -webkit-transform: translateX(2%); 
    } 

    100% { 
    -webkit-transform: translateX(0); 
    } 
} 
.slide-it { 
    animation: slide-left 0.9s ease-in-out 1s both; 
} 

然後JS

$("#button").on('click', show_function); 

function show_function() { 
    $(".graph").fadeIn("slow"); 
    $('.bar-container').addClass('slide-it'); 
}