Question

首先抱歉有趣的标题。

我试图产生涟漪效应。

我希望效果开始我点击我的div，但是当我点击涟漪效果时首先发生。

我做错了什么？

$(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

使用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/

Answer 2

将您的课程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/

为什么addClass方法首先在Jquery中运行？

2 个答案: