硬币翻转动画使用addClass无法正常工作

Question

这是现场网站：

http://thomaspalumbo.com/projects/coinflip/

目标：每次点击硬币时都有翻转动画。

这是我的javascript：

function coinToss() {
        var number = Math.floor(Math.random() * 2);


                $("#coin").toggleClass('flipAgain');


        if(number == 0) {
            $("#coin").removeClass('heads');
            $("#coin").removeClass('tails');

            var value = $("#headsText").val(); 
            document.getElementById("result").innerHTML="Heads";
            $('#resultText').html($("#headsText").val());
            $("#coin").addClass('heads');

        }
        else if(number == 1) {
            $("#coin").removeClass('heads');
            $("#coin").removeClass('tails');

            var value = $("#tailsText").val(); 
            document.getElementById("result").innerHTML="Tails";
            $('#resultText').html($("#tailsText").val());
            $("#coin").addClass('tails');
    }
}

此代码每隔一段时间才有效。我尝试过使用两个不同的类，flip和flipAgain，它们具有相同的动画css。我有一个if else语句正确切换，但没有动画。这是javascript：

if($("#coin").hasClass("flip")){
                $("#coin").removeClass('flip');
                $("#coin").toggleClass('flipAgain');
            }
            else if($("#coin").hasClass('flipAgain')){
                $("#coin").removeClass('flipAgain');

                $("#coin").toggleClass('flip');
            }
            else {
                $("#coin").toggleClass('flip');
            }