Почему метод addClass запускается сначала в JQuery?

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/