剪切动画的绝对子项

Question

我环顾四周寻找答案，并发现我应该使用position: relative;来纠正我的情况。但是，它似乎不适用于我的情况。我正在使用JQuery和AnimeJS。从本质上讲，我想要实现的是Google对AnimeJS按钮的涟漪效应。

如果我没有立即回复，请提前致谢。

＆＃13;

＆＃13;

function ripple(event) {
  //Find cursor position
  var x = event.pageX,
    y = event.pageY;
  if ($(".ripple").length > 0) { //If there is already a div for the ripple
    //Remove previous ripple
    $(".ripple").remove();

    $("div.btn").append("<div class='ripple'></div>"); //Append a div with the class ripple
    $(".ripple").css({
      "top": y - 20,
      "left": x - 20
    }); //Position the div so that it is on the cursor
    var ripple = anime({ //Ripple Animation
      targets: ".ripple",
      opacity: {
        value: [1, 0],
        duration: 2000
      },
      scale: {
        value: 10,
        duration: 3000
      },
    });
    $(".ripple").delay(2000).queue(function() {
      $(this).remove();
    }); //Delete div at the end of the animation
  } else {
    $("div.btn").append("<div class='ripple'></div>"); //Append a div with the class ripple
    $(".ripple").css({
      "top": y - 20,
      "left": x - 20
    }); //Position the div so that it is on the cursor
    var ripple = anime({ //Ripple Animation
      targets: ".ripple",
      opacity: {
        value: [1, 0],
        duration: 2000
      },
      scale: {
        value: 10,
        duration: 3000
      },
    });
    $(".ripple").delay(3000).queue(function() {
      $(this).remove();
    }); //Delete div at the end of the animation
  }
}

＆＃13;

html {
  background: #d6d7d8;
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  grid-template-rows: 2fr 1fr 2fr;
}

.btn {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;
  background: #ff5722;
  border-radius: 10px;
  box-shadow: 0 10px 20px 4px #aaaaaa;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  border: none;
  position: relative;
}

.ripple {
  pointer-events: none;
  position: absolute;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  background: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="btn" onclick="ripple(event)"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果我正确理解问题，请设置x＆amp; y只是event.pageX / pageY没有考虑父按钮的位置。因此，如果pageX = 200，那么您正在将CSS设置为左：相对于父级的200px。父级只有80px宽，所以它将不在父容器中。

为了考虑父母，您可以分别从event.pageX和pageY中减去父按钮的offsetLeft和offsetTop：

  var x = event.pageX - $btn.offsetLeft,
      y = event.pageY - $btn.offsetTop;

我对原来的JS做了一些清理工作。一般来说，你不想重复自己，看起来像else语句中的所有代码都没有必要。

为了在将来调试这样的问题，在添加动画之前，可能更容易逐步逐步查看是否一切都在您期望的位置。例如，通过删除动画并仅查看。ripple元素的位置，我可以很快发现它不在需要的位置。

function ripple(event) {
  var $btn = $("div.btn");
  var $ripple = $(".ripple");

  //Find cursor position
  var x = event.pageX - $btn.offsetLeft,
    y = event.pageY - $btn.offsetTop;

  //If there is already a div for the ripple
  if ($ripple.length > 0) {
    //Remove previous ripple
    $ripple.remove();
  }

  //Append a div with the class ripple
  $ripple = $('<div class="ripple"></div>');
  $btn.append($ripple);

  //Position the div so that it is on the cursor
  $ripple.css({
    "top": y,
    "left": x
  });

  //Ripple Animation
  var ripple = anime({
    targets: ".ripple",
    opacity: {
      value: [1, 0],
      duration: 2000
    },
    scale: {
      value: 10,
      duration: 3000
    },
  });

  //Delete div at the end of the animation
  $ripple.delay(2000).queue(function() {
    $(this).remove();
  });
}

html {
  background: #d6d7d8;
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  grid-template-rows: 2fr 1fr 2fr;
}

.btn {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;
  background: #ff5722;
  border-radius: 10px;
  box-shadow: 0 10px 20px 4px #aaaaaa;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  border: none;
  position: relative;
}

.ripple {
  pointer-events: none;
  position: absolute;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="btn" onclick="ripple(event)"></div>