Question

在下面的codepen中，创建者产生了材质连锁反应。但是有一个问题，如果我在原件旁边添加另一个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

基本答案是＆＃39;涟漪＆＃39;元素需要包含在具有overflow：hidden set的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");
});

如何防止此材质波纹动画泄漏到其他div中？

1 个答案: