爲什麼addClass方法首先在Jquery中運行？

Question

對不起，有趣的標題第一。

我正在嘗試使連鎖效應。

我想要效果開始，我點擊我的div，但是當我點擊首先發生的連鎖效應。

我在做什麼錯了？使用JavaScript和jQuery

Jsfiddle

$(function() { 
 

 
    $(".box").click(function(event) { 
 
    var x = event.clientX; 
 
    var y = event.clientY; 
 
    $(".ripple").css({ 
 
     "top": y - 5, 
 
     "left": x - 5 
 
    }); 
 
    $(".ripple").addClass('active'); 
 

 
    setTimeout(function() { 
 
     $(".ripple").removeClass('active'); 
 
    }, 500); 
 

 
    }); 
 

 
});

.box { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: #434A54; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.ripple { 
 
    width: 10px; 
 
    height: 10px; 
 
    border-radius: 100%; 
 
    transform: scale(1); 
 
    background: rgba(255, 255, 255, 1); 
 
    position: absolute; 
 
    opacity: 1; 
 
} 
 
.active { 
 
    transform: scale(60); 
 
    opacity: 0; 
 
    transition: all 0.6s linear; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <div class="ripple"></div> 
 
</div>

Answer 1

添加類animation不transition。

之前;

.active { 
    transform: scale(60); 
    opacity: 0; 
    transition: all 0.6s linear; 
} 

後

.active { 
    animation: ripple .6s linear; 
} 
@keyframes ripple { 
    100% { 
    transform: scale(60); 
    opacity: 0; 
    } 
} 

檢查它。 https://jsfiddle.net/h9s32m0o/1/

Answer 2

客戶端執行異步是，這意味着你的代碼將不會出現在它被宣佈爲同一順序執行。您應該使用.animate()函數並截取動畫函數完成後的連鎖效果。

$(function() { 

    $(".box").click(function(event) { 
    var x = event.clientX; 
    var y = event.clientY; 

    $(".ripple").animate({ 
    top: y - 5, 
    left: x - 5 
    }, 1000, function() { 
    var trans = $(".ripple").addClass('active'); 

    setTimeout(function() { 
     trans.removeClass('active'); 
    }, 500); 

    }); 


    }); 

}); 

例子：https://jsfiddle.net/b1bpoqkv/1/