javascript - 在 css 中使用圆形 div mask 动画

Question

我正在创建一个具有波纹效果的类似 google-material-design 的按钮，但当我希望它是圆形时，我的动画显示为方形。

发生这种情况是因为动画达到了比它所在的 div 更大的尺寸，然后填充了外部 div 的边缘，使它看起来像一个正方形。有没有办法将外部 div 本身设置为圆形，因为即使我设置了 border-radius: 50%，div 本身(不是在 div 中创建的形状)仍然一个正方形。

html:

<div id="imgs">
    <div id="button"></div>
</div>

CSS:

#button{
  position: relative;
  overflow: hidden;
  height: 56px;
  width: 56px;
  border-radius: 50%;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
   box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
}

.drop{
  display: block;
  position: absolute;
  background: hsl(180, 40%, 80%);
  border-radius: 50%;
  transform: scale(0);
}

.drop.animate {
  -webkit-animation-name: ripple;
  -webkit-animation-duration: 0.65s;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes ripple {
  100% {opacity: 0; transform: scale(2.5);}
}

我以为给 #button 属性 overflow: hidden 会产生遮蔽效果，但事实并非如此。

JavaScript:

var parent, ink, d, x, y;## Heading ##
$("#imgs #button").click(function(e){
    element = $(this);
    if(element.find(".drop").length === 0)
        element.prepend("<span class='drop'></span>");

    drop = element.find(".drop");
    drop.removeClass("animate");

    if(!drop.height() && !drop.width())
    {
        d = Math.max(element.outerWidth(), element.outerHeight());
        drop.css({height: d, width: d});
    }

    x = e.pageX - element.offset().left - drop.width()/2;
    y = e.pageY - element.offset().top - drop.height()/2;

    //set the position and add class .animate
    drop.css({top: y+'px', left: x+'px'}).addClass("animate");
});

这是一个有效的 fiddle您可以在其中看到上述代码生成的效果。我怎样才能改变它，使波纹动画显示为圆形(仅限于圆形按钮)而不是方形(扩展到按钮的边界)？

Answer 1

此问题是由 chrome 中报告的错误引起的。目前还没有解决办法，但有一个不影响美观的简单解决方法。

你需要给元素添加一个变换:-webkit-transform: rotate(0.000001deg); 它可以小到难以察觉，但应该足以通过促进元素的绘制顺序。

var parent, ink, d, x, y;
$("#imgs #button").click(function(e) {
  element = $(this);
  if (element.find(".drop").length === 0)
    element.prepend("<span class='drop'></span>");

  drop = element.find(".drop");
  drop.removeClass("animate");

  if (!drop.height() && !drop.width()) {
    d = Math.max(element.outerWidth(), element.outerHeight());
    drop.css({
      height: d,
      width: d
    });
  }

  x = e.pageX - element.offset().left - drop.width() / 2;
  y = e.pageY - element.offset().top - drop.height() / 2;

  //set the position and add class .animate
  drop.css({
    top: y + 'px',
    left: x + 'px'
  }).addClass("animate");
});

#button {
  position: relative;
  overflow: hidden;
  height: 56px;
  width: 56px;
  border-radius: 50%;
  -webkit-box-shadow: 0 1px 5px 0 rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0 1px 5px 0 rgba(50, 50, 50, 0.75);
  box-shadow: 0 1px 5px 0 rgba(50, 50, 50, 0.75);
  -webkit-transform: rotate(0.000001deg); /* This is the important bit */
}
.drop {
  height: 56px;
  width: 56px;
  display: block;
  position: absolute;
  background: hsl(180, 40%, 80%);
  border-radius: 90%;
  transform: scale(0);
}
.drop.animate {
  -webkit-animation-name: ripple;
  -webkit-animation-duration: 0.65s;
  -webkit-animation-timing-function: linear;
}
@-webkit-keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
    border-radius: 90%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgs">
  <div id="button"></div>
</div>

这是错误的分割:

https://code.google.com/p/chromium/issues/detail?id=157218