javascript - 我怎样才能防止这种 Material 波纹动画泄漏到其他 div 中？

Question

在下面的codepen中，创作者做了一个 Material 涟漪效果。但是有一个问题，如果我在原来的旁边添加另一个 div，波纹就会泄漏到它里面。

我应该怎么做才能更改代码，使涟漪只包含在激活它的 div 中？

我曾尝试编辑 JS，以便点击功能仅针对类为“.rippleDiv”的 div 激活，但这也不起作用。

Codepen 链接 http://codepen.io/Ruddy/pen/09052b957d82a17bd6ca70ac6663dd6a

HTML

<div class="rippleDiv">Button</div>
<div>Button 2</div>

CSS

div {
  width: 220px;
  height: 120px;
  background: #222;
  color: #fff;
  text-align: center;
  line-height: 120px;
  font-size: 40px;
}

/*  Ripple */

.ripple {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  position: absolute;
  opacity: 1;
}
.rippleEffect {
    animation: rippleDrop .6s linear;
}

@keyframes rippleDrop {
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

JS

$(".rippleDiv").click(function (e) {

  // Remove any old one
  $(".ripple").remove();

  // Setup
  var posX = $(this).offset().left,
      posY = $(this).offset().top,
      buttonWidth = $(this).width(),
      buttonHeight =  $(this).height();

  // Add the element
  $(this).prepend("<span class='ripple'></span>");


 // Make it round!
  if(buttonWidth >= buttonHeight) {
    buttonHeight = buttonWidth;
  } else {
    buttonWidth = buttonHeight; 
  }

  // Get the center of the element
  var x = e.pageX - posX - buttonWidth / 2;
  var y = e.pageY - posY - buttonHeight / 2;


  // Add the ripples CSS and start the animation
  $(".ripple").css({
    width: buttonWidth,
    height: buttonHeight,
    top: y + 'px',
    left: x + 'px'
  }).addClass("rippleEffect");
});

Answer 1

基本答案是“ripple”元素需要包含在设置了 overflow:hidden 的 div 中。

然而，要做到这一点，需要进行一些小的更改，以便原始按钮内容和波纹本身都正确定位，主要是使用设置了正确定位属性的 div。

所以 - 这是我为使其正常工作所做的更改:http://codepen.io/kitr/pen/xgLQpM

HTML:

<div>Button</div>
<div>Button 2</div>

CSS:

div {
  width: 220px;
  height: 120px;
  background: #222;
  color: #fff;
  text-align: center;
  line-height: 120px;
  font-size: 40px;
  position:relative;
  overflow:hidden;
}

/*  Ripple */

.ripple {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  opacity: 1;
}
.rippleEffect {
    animation: rippleDrop .6s linear;
    position: absolute;
}

@keyframes rippleDrop {
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

Javascript:

$("div").click(function (e) {

  // Remove any old one
  $(".ripple").remove();

  // Setup
  var posX = $(this).offset().left,
      posY = $(this).offset().top,
      buttonWidth = $(this).width(),
      buttonHeight =  $(this).height();

  // Add the element
  $(this).append("<div class='ripple'></div>");


 // Make it round!
  if(buttonWidth >= buttonHeight) {
    buttonHeight = buttonWidth;
  } else {
    buttonWidth = buttonHeight; 
  }

  // Get the center of the element
  var x = e.pageX - posX - buttonWidth / 2;
  var y = e.pageY - posY - buttonHeight / 2;


  // Add the ripples CSS and start the animation
  $(".ripple").css({
    width: buttonWidth,
    height: buttonHeight,
    top: y + 'px',
    left: x + 'px'
  }).addClass("rippleEffect");
});