JQueryでaddClassメソッドが最初に実行されるのはなぜですか？

Question

最初に面白いタイトルをお詫び申し上げます。

私は波及効果を作り出そうとしています。

私は自分のdivでクリックしたところで効果の開始をしたいが、最初に波紋効果をクリックすると、

私は間違っていますか？

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

クライアント側のJavaScriptを使用して実行とjQueryを使用すると、コードは、それが宣言されたのと同じ順序で実行するために表示されないことを意味非同期です。 .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/