为什么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/